How to set div background transparent

How to set div background transparent

There are two common methods for div background transparency :

1. Through the opacity property setting, the value 0~1,0 means transparent, 1 means opacity, but this method will also set the content on the div to be transparent.
The effect is as follows:
Insert picture description here

2. Through the background-color setting of rgba format, the format is: background-color:rgba(0,0,0,0~1), 0 means transparent, 1 means opaque. Insert picture description here
The code is as follows :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .id{
     
     
            width: 600px;
            height: 300px;
        
        }
        .tm1{
     
     
            margin: 40 auto;
            text-align: center;
            line-height: 200px;
            width: 800px;
            height: 200px;
            background-color: yellow;
            opacity: 0.6;
        }
        .tm2{
     
     
            margin: 40 auto;
            text-align: center;
            line-height: 200px;
            width: 800px;
            height: 200px;
            background-color: rgba(255, 255, 0, 0.5);
        }
    </style>
</head>
<body>
    <!--背景div-->
    <div class="id">
    <!--透明div方法一-->
    <div class="tm1">透明div方法一,通过opacity设置透明度,div上的文字也透明:opacity: 0.6;</div><br>
    <!--透明div方法二-->
    <div class="tm2">透明div方法二,通过rgba设置透明度,div上面的文字不透明:background-color:rgba(255,0,0,0.5);</div>
</div>
</body>
</html>

One more thing to note here:
rgba() functionUse the superposition of red®, green (G), blue (B), and transparency (A) to generate a variety of colors.

RGBA stands for red, green, blue, transparency (English: Red, Green, Blue, Alpha).
Red (R) is an integer between 0 and 255, representing the red component of the color. .
Green (G) is an integer between 0 and 255, representing the green component of the color.
Blue (B) is an integer between 0 and 255, representing the blue component of the color.
Transparency (A) ranges from 0 to 1, representing transparency.
You can find the rgba value on Baidu Encyclopedia.
Similar to: Insert picture description here
color code comparison table link:
https://www.sioe.cn/yingyong/yanse-rgb-16/

Guess you like

Origin blog.csdn.net/weixin_54282421/article/details/113133243