Home > Article > Web Front-end > How to make color transparent in css
How to make color transparent in css
- 藏色散人Original
- 2020-12-11 09:31:203859browse
How to make colors transparent in CSS: First create an HTML sample file; then create a div; and finally set the transparency of the element background through the "opacity:0.5;" attribute.
The operating environment of this tutorial: windows7 system, css3, thinkpad t480 computer.
Recommended: "css video tutorial"
CSS color transparency
1. Set element background transparency
opacity can be used to set the transparency of the element background; it requires a value between 0 and 1
0 means completely transparent (opacity: 0);
1 means completely opaque (opacity: 1);
0.5 means translucent (opacity: 0.5);
Code demonstration:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>opactity</title>
<style>
.box1{
position:relative;
width:200px;height:200px;
background-color: #00f;
}
.box2{
position:absolute;
top:80px;
left:80px;
width:200px;
height:200px;
background-color:#0f0;
}
.box3{
position:relative;
width:200px;
height:200px;
background-color:#f00;
z-index:1;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>Compare the performance of the element before setting the same name:
The effect of setting transparency
.box1{
position:relative;
width:200px;height:200px;
background-color: #00f;
z-index:10;
opacity:0.5;
}
.box2{
position:absolute;
top:80px;
left:80px;
width:200px;
height:200px;
background-color:#0f0;
z-index:5;
opacity:0.5;
}
.box3{
position:relative;
width:200px;
height:200px;
background-color:#f00;
z-index:1;
opacity:0.5;
}Performance effect:
2. Browser compatibility issues:
The opacity attribute is not supported in IE8 and below browsers
In order to achieve a transparent effect, IE8 and below The browser needs to use the following tag instead:
alpha(opacity=transparency)
Transparency select a value between 0 and 100
0 means completely transparent (filter: alpha(opacity=0);)
100 means completely opaque (filter:alpha(opacity=100);)
50 means semi-transparent (filter:alpha(opacity=50);)
This method supports IE6
filter:alpha(opacity=50);
.box1{
position:relative;
width:200px;height:200px;
background-color: #00f;
z-index:10;
opacity:0.5;
filter:alpha(opacity=10);
}
.box2{position:absolute;
top:80px;
left:80px;
width:200px;
height:200px;
background-color:#0f0;
z-index:5;
opacity:0.5;
filter:alpha(opacity=50);}
.box3{
position:relative;
width:200px;
height:200px;
background-color:#f00;
z-index:1;
opacity:0.5;
filter:alpha(opacity=80)}Performance effect: It can also be well adapted to IE8 and below browsers
Because the element filter:alpha(opacity=transparency) is written below, the priority of filter:alpha(opacity=transparency) is higher than the priority of opacity:0.5;. The final performance effect is not opacity:0.5
The above is the detailed content of How to make color transparent in css. For more information, please follow other related articles on the PHP Chinese website!