How to set the transparency of css3
This article mainly explains "how to set the transparency of css3". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "how to set the transparency of css3".
Methods: 1, the use of rgba () function, syntax for "rgba (red value, green value, blue value, transparency value);"; 2, the use of opacity attribute, syntax for "opacity: transparency value;"; 3, the use of filter attribute, syntax for "transparency value);".
The operating environment of this tutorial: windows7 system, CSS3&&HTML5 version, Dell G3 computer.
The setting method of css3 Transparency
1. Use the rgba () function to use the superposition of red (R), green (G), blue (B) and transparency (A) to generate a variety of colors.
RGBA means red, green, blue, transparency (English: Red, Green, Blue, Alpha).
Red (R) an integer between 0 and 255 that represents the red component of the color. Green (G) an integer between 0 and 255 that represents the green component of the color. Blue (B) an integer between 0 and 255 that represents the blue component of the color. The value of transparency (A) is between 0,1, which represents transparency.
Output result:
2. Use the opacity attribute to set the opacity level of the element. The code is as follows:
Div {background-color:red;opacity:0.5;filter:Alpha (opacity=50); / * IE8 and earlier browsers * /} the opacity of this element is 0.5. Note that both the text and the background color are affected by the level of opacity.
Output result:
3. Use the filter attribute to define the element (usually the
Visual effects (for example, blur and saturation). The code is as follows:
Img {- webkit-filter:opacity; / * Chrome, Safari, Opera * / filter:opacity;}
The picture becomes transparent:
Output result:
Thank you for your reading, the above is the content of "how to set the transparency of css3". After the study of this article, I believe you have a deeper understanding of how to set the transparency of css3, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!
