Home > Article > Web Front-end > How to set transparency in css
We often need to use CSS code to set the transparency of a DIV at work. Today I will introduce to you how to use a CSS style sheet to set the transparency and translucency of a DIV. Hope it helps everyone.
First let’s talk about the CSS code for setting DIV translucency:
div{filter:alpha(Opacity=80);-moz-opacity:0.5;opacity: 0.5;}Description:
1. Filter: Set the translucent filter effect for win IE, filter:alpha( Opacity=80) means that the object is 80% translucent, Firefox browser will not recognize it
2. -moz-opacity: achieve translucency for mozilla firefox Firefox browser, win IE will not recognize it For this attribute, -moz-opacity:0.5 is equivalent to setting the translucency to 50%
3. Opacity: supports all browsers except IE, including Google. The last one is mainly for Google Chrome, opacity: 0.5; Indicates setting 50% translucency
In order to observe the translucency of DIV, we set up two DIV layers, one inside the other DIV layer, and the outer DIV is named ".div-a"; The layer contained above CSS class is named ".div-b", forming a ".div-b" box and placing it inside ".div-a"
We set the underlying DIV A background is a picture with a DIV box above it set to black.
1. According to the described example, the translucent HTML source code is not set:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>半透明实例在线演示 www.divcss5.com</title>
<style>
.div-a{ background:url(div-a-bg.png) no-repeat;width:230px;height:136px;padding:10px;}
.div-b{ background:#000;width:200px;height:100px;padding:5px;color:#F00}
</style>
</head>
<body>
<div class="div-a">
<div class="div-b">DIV半透明实例演示</div>
</div>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>半透明实例在线演示 www.divcss5.com</title>
<style>
.div-a{ background:url(div-a-bg.png) no-repeat;width:230px;height:136px;padding:10px}
.div-b{ background:#000;width:200px;height:100px;padding:5px;color:#F00;
filter:alpha(Opacity=60);-moz-opacity:0.6;opacity: 0.6}
/* CSS注释说明：这里对CSS代码换行是为了让代码在此我要中显示完整，换行后CSS效果不受影响 */
</style>
</head>
<body>
<div class="div-a">
<div class="div-b">实现DIV半透明实例演示</div>
</div>
</body>
</html>Summary: According to the above examples, the first one is not set to be translucent and the other is set to be translucent to achieve the div translucency effect. We can adjust the translucency value as needed. , to achieve the translucency you want, but you must remember that the translucency effect needs to take into account the compatibility and support of IE, Google, Firefox and other browsers, so our translucent style code must be complete and cannot be missing. . Related reading:
How to end the compatibility issues with transparency in IE 6, 7, and 8
css: box-shadow How to set transparency?
css: Detailed explanation of border-collapse attribute and opacity transparency of td border in table
The above is the detailed content of How to set transparency in css. For more information, please follow other related articles on the PHP Chinese website!