Home > Article > Web Front-end > How to set background transparency in css
How to set background transparency in css
- 王林forward
- 2020-08-29 16:06:443268browse
There are many ways to achieve background transparency. This article introduces the following two methods:
(recommended related tutorials: CSS Tutorial）
css3’s opacity:x, the value of x is from 0 to 1, such as opacity: 0.8
css3’s rgba(red, green, blue, alpha), the value of alpha From 0 to 1, such as rgba(255,255,255,0.8)
1. Opacity of css3
Compatibility: IE6, 7, and 8 are not supported, but IE9 and above are supported by standard browsers
Instructions for use: All descendant elements of the opacity element will be set to be transparent together. It is generally used to adjust the overall opacity of the image or module.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景透明度</title>
<style>
.demo{
padding: 25px;
background-color:#000000;
filter:alpha(opacity:50); opacity:0.5; -moz-opacity:0.5;-khtml-opacity: 0.5;
}
.demo p{
color: #FFFFFF;
}
</style>
</head>
<body>
<div class="demo">
<p>背景透明，文字也透明</p>
</div>
</body>
</html>After using opacity, the entire module will be transparent. , shown as follows:
# Then it is not advisable to use opacity to achieve "transparent background, opaque text".
(Video tutorial recommendation: css video tutorial)
2. Rgba of css3
The so-called RGBA color, as the name means, is the color of R G B A, and then Specifically, it is the color of red green blue alpha, which translates into the transparent color of red green blue alpha.
background:rgba(200, 54, 54, 0.5);
Among them, the 0 in front of 0.5 indicating translucency can be omitted, or directly .5 is also acceptable.
Compatibility: IE6, 7, and 8 are not supported, IE9 and above and standard browsers are supported
How to solve the problem that IE8 browser does not support rgba:
background:rgba(0,0,0,0.5); filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7F000000,endcolorstr=#7F000000);
Instructions for use: Set the opacity of the color, generally used to adjust the opacity of background-color, color, box-shadow, etc.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css3的rgba</title>
<style>
.demo{
padding: 25px;
background-color:#000000;/* IE6和部分IE7内核的浏览器(如QQ浏览器)下颜色被覆盖 */
background-color:rgba(0,0,0,0.2); /* IE6和部分IE7内核的浏览器(如QQ浏览器)会读懂，但解析为透明 */
}
.demo p{
color: #FFFFFF;
}
</style>
</head>
<body>
<div class="demo">
<p>背景透明，文字也透明</p>
</div>
</body>
</html>Use rgba in background-color. In standard browsers, the background is transparent and the text is opaque, as shown below:
The above is the detailed content of How to set background transparency in css. For more information, please follow other related articles on the PHP Chinese website!