Shulou(Shulou.com)06/02 Report--

This article mainly introduces "how to set the css3 attribute of element transparency". In daily operation, I believe many people have doubts about how to set the css3 attribute of element transparency. Xiaobian consulted all kinds of data and sorted out a simple and easy-to-use method of operation. I hope it will be helpful to answer the doubt of "how to set the css3 attribute of element transparency". Next, please follow the editor to study!

Set element transparency of the css3 attribute there are two: 1, the opacity attribute, you can set the level of transparency of the element, syntax "opacity: transparency value;"; 2, filter attribute, and opacity () function used to set element transparency, syntax "filter:opacity (value%);".

The operating environment of this tutorial: windows7 system, CSS3&&HTML5 version, Dell G3 computer.

Set the css3 attribute for element transparency

1. Opacity attribute

The Opacity attribute sets the transparency level of an element.

Syntax:

Opacity: value

Value: specifies opacity; from 0.0 (fully transparent) to 1.0 (completely opaque).

Example:

2. Filter attribute

The filter attribute defines the element (usually the

Visual effects (for example, blur and saturation).

The filter attribute is used with the opacity () function to set the transparency of the element.

Value defines the scale of the conversion. A value of 0% is completely transparent, and a value of 100% means no change in the image. A value between 0% and 100% is a linear multiplier of the effect, which is also equivalent to the number of image samples multiplied by the number. If the value is not set, the default value is 1. This function is similar to the existing opacity property, except that through filter, some browsers provide hardware acceleration to improve performance.

Example:

At this point, the study on "how to set the css3 attribute of element transparency" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.