Three ways to achieve background transparency in css-CSS Tutorial-php.cn

Three ways to achieve background transparency in css

王林

Release： 2020-06-10 09:17:11

forward

5083 people have browsed it

Three ways to achieve background transparency in css

There are usually three ways to achieve background transparency in css. The following are the ways to write the opacity of these three ways to 80%:

Opacity:x of css3 , the value of x is from 0 to 1, such as opacity: 0.8

rgba(red, green, blue, alpha) of css3, the value of alpha is from 0 to 1, such as rgba(255,255,255,0.8)

IE exclusive filter filter:Alpha(opacity=x), the value of x is from 0 to 100, such as filter:Alpha(opacity=80)

(Video tutorial recommendation: css video tutorial)

1. Opacity of css3

Compatibility: IE6, 7, and 8 are not supported, but IE9 and above and standard browsers are supported Support

Instructions for use: All descendant elements that set the opacity element will 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>

Copy after login

After using opacity, the entire module will be transparent The effect is as follows:

Three ways to achieve background transparency in css

Then it is not advisable to use opacity to achieve "transparent background, opaque text".

2. rgba of css3

The so-called RGBA color, as the name implies, is the color of R G B A. To be more specific, it is the color of red green blue alpha, which translates to red and green. Blue Alpha transparent color.

background:rgba(200, 54, 54, 0.5);

Copy after login

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);

Copy after login

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>

Copy after login

Use rgba in background-color. In standard browsers, the background is transparent and the text is opaque. The effect is as follows:

Three ways to achieve background transparency in css