Introduction to how to use the opacity attribute of CSS3 to set a transparent effect

This article mainly introduces the detailed explanation of the usage of CSS3's opacity attribute to set the transparent effect. It also talks about the inheritance nature of opacity transparency that affects subset elements. It is worth the attention of beginners and needs to be Friends can refer to

CSS3. The function of the opacity attribute is to control the transparency of web elements (adjust opacity). Early web design often used many transparency effects, usually through png images. layers to create a transparent feeling. Now web designers can use the CSS3 opacity attribute to easily adjust the opacity of web page elements. The syntax of the CSS3 opacity attribute is very simple. You only need to adjust the numbers to present different effects. Transparency, and then design a very modern web page style, which can be applied to web page picture, p block, span area, Table table... and other elements. All new versions of mainstream browsers support CSS3 opacity The effect of the attribute.

Basic syntax of CSS3 opacity attribute
opacity: opacity;
The "opacity" of the CSS3 opacity attribute parameter is represented by a number, ranging from 0.0 to 1.0, completely Transparency is 0.0 and fully opaque is 1.0. In other words, the higher the number, the more opaque the element is. In addition to "opacity" parameters, there is also inherit to inherit the properties of the parent layer. However, browser support is poor and it is not recommended to use it.

actual example of CSS3 opacity attribute

<p style="padding:10px;background-color:green;opacity:0.1;">   
测试 CSS3 opacity 属性的不透明度处理   
</p>   
<p style="padding:10px;background-color:green;opacity:0.5;">   
测试 CSS3 opacity 属性的不透明度处理   
</p>   
<p style="padding:10px;background-color:green;opacity:0.8;">   
测试 CSS3 opacity 属性的不透明度处理   
</p>

The output effect of the example

The example prepared a total of three p blocks with added opacity effect. You can notice that the first block from the top has an opacity of 0.1 (opacity:0.1), so the entire block becomes almost invisible. When it comes to color and text, the opacity of the second block is set to 0.5 (opacity: 0.5), so it is much clearer than the first block. The third block reduces the opacity to 0.8 again, and the text and background colors are clearer. More obviously, this is the actual effect of the CSS3 opacity attribute. From the example, you can clearly see that the text content and background-color within a p block will be affected by the opacity of the opacity attribute.

Supplement: The current new version of mainstream browsers all support the CSS3 opacity attribute, but it should be noted that IE8 and earlier versions of IE browsers must use alternative syntax to implement it. The so-called alternative syntax is to use The filter attribute is written like "filter:Alpha(opacity=50);", and the effect is equal to "opacity:0.5".

Inheritance issue of opacity transparency attribute
The opacity transparency attribute of CSS3 is inheritable. When the opacity transparency attribute is set for a object, its opacity transparency attribute is inherited. Subset elements will also have transparency effects;

<p class="main">
  <p class="p1">
    <p>背景色为rgb的opacity效果</p>
  </p>
  <p class="p2">
    <p>背景色为rgba的透明效果</p>
  </p>
</p>

CSS:

.main{   
  clear:rightright;   
  margin:20% auto;   
  overflow:hidden;   
  width:335px;   
}   
.main p{   
  color:red;   
  float:left;   
  display:inline-block;   
  width:160px;   
  height:160px;   
  text-align:center;   
}   
/*使用opacity透明属性的显示效果*/
.p1{background-color:rgb(0,0,0);   
  opacity:0.5;   
  filter:alpha(opacity=50);   
  -ms-filter:'progid:DXImageTransform.Microsoft.Alpha(opacity=50)';margin-right:15px;   
}   
.p1 p{   
  position:relative;   
}   
/*使用rgba色显示的效果*/
.p2{   
  background:rgba(0,0,0,.5)   
}

Summary: Use rgba background color The transparency effect of an object can be set directly, and there is no inheritance for its subset elements; while objects that use rgb color and set the opacity transparency attribute have transparency inheritance.

However, if you copy the entire code and test it in browsers below IE9, you will find that setting the opacity transparency attribute appears in IE7 and IE8 browsers. The subset elements in the object do not inherit the transparency effect of the parent set elements, and objects whose background color is set to rgba have no effect. This is because: a subset of elements in the object with the opacity transparency attribute set has the position:relative attribute, which makes it solved in browsers below IE9; secondly, browsers below IE9 are not compatible with rgba color, so you'll see that the second background color has no effect.

The above is the detailed content of Introduction to how to use the opacity attribute of CSS3 to set a transparent effect. For more information, please follow other related articles on the PHP Chinese website!