How to write transparency in css
This article will explain in detail how to write transparency in css. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.
In css, if we want to set transparency, we can use the opacity property and rgba () to set it. And in use, we need to know that opacity is used to set the degree of transparency, and for rgba (), it is used to set transparency for colors. So let's take a look at opacity and rgba ().
1.opacity attribute
When we use this property, we can set the transparency value in the range of 0.0 to 1.0. The smaller the corresponding value, the greater the transparency, and vice versa.
Syntax:
Opacity: value | inherit
In syntax, value refers to the value of opacity. Inherit means that the value of the opacity attribute should be inherited from the parent element.
2.rgba ()
RGBA means (Red-Green-Blue-Alpha) it extends to RGB to include a "alpha" channel, and it can also set transparency for colors.
Syntax:
Rgba (RMagna Gregory BMaga)
Introduction to the value in rgba (): r: red value. Positive integer (0,255) G: green value. Positive integer (0,255) B: blue value. Positive integer (0,255) A: transparency (between values of 0,255).
3. Case
(1) set text transparency
We observe the content of the text by making it transparent. The code is as follows:
Opacity attribute text case .demo {background: # 009991; padding: 15px; text-align:center; width:300px;} # rgba {padding: 15px; text-align:center Width:300px;} .rgba1 {background: rgba (0,153,145,0.1);} .rgba2 {background: rgba (0,153,145,0.5) } .rgba3 {background: rgba (0,153,145,0.8);} .rgba4 {background: rgba (0,153,145,1.0);} .g1 {float:left Margin-left:50px;} .g2 {margin-top:-40px; margin-left:50px; float:left;} transparent box
10% opacity
50% opacity
80% opacity
100% opacity
Rgba color value
10% opacity
50% opacity
80% opacity
100% opacity
[object Object]
In the results, we see that the transparency varies depending on the vue value in different opacity.
(2) the image transparency setting code is as follows:
Opacity attribute picture case .forest {width:110px; opacity: 0.5;} .forest-one {width:110px } .opacity {text-align:center; float: left;} .opacity-one {margin-left: 20px; text-align:center; float: left } body {background:gainsboro no-repeat; background-size:cover;}
With transparency map
Original drawing
This is the end of the article on "how to write transparency in css". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.
