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:
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.
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:
color code comparison table link:
https://www.sioe.cn/yingyong/yanse-rgb-16/