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

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.

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.