Home > Article > Web Front-end > How to set transparency in css

How to set transparency in css

php中世界最好的语言Original: 2017-11-20 13:23:244037browse

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>

##1. We add semi-transparent to the ".div-b" selector. Transparent style code:

filter:alpha(Opacity=60);-moz-opacity:0.6;opacity: 0.6;

Set 60% translucent effect

Complete example The HTML code of the web page is as follows:

<!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. .

How to set transparency in css

Related articles