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

This article introduces the relevant knowledge of "what is the difference between rgba and opacity of CSS". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

How to use rgba and opacity

1 、 opacity

Values are between 0 and 1, with 0 being completely transparent and 1 being completely opaque.

.aa {opacity:0.5;}

2 、 rgba

R in rgba stands for red, G for green, and B for blue, and the values of all three colors can be positive integers or percentages. A represents Alpha transparency. The value is between 0 and 1, similar to opacity.

.aa {background:rgba (255pr 0pl 0je 0.5);}

II. The difference between rgba and opacity

Both rgba () and opacity can achieve transparency, but the biggest difference is that opacity acts on the element and the transparency of everything within the element, while rgba () only acts on the color of the element or its background color. (setting the child elements of rgba transparent elements will not inherit transparency! For example, we use opcity (0. 5) to write transparent black parts, but one problem that arises is that if you write on this div, then that font will become transparent. So we write in the style of rgba, the first three numbers correspond to the three colors of rreco gjournal b, and the fourth digit corresponds to the transparent coefficient.

For example: give the outside a div red background, and set its transparency to 0pr 5, give the inside div color green, and add text. The code is as follows:

! DOCTYPEhtml >

.a1 {width:200px;height:200px;background:red;opacity:0.5;}

.a2 {width:200px;height:50px;background:#008000;font-size:30px;}

I'm in a bad mood today

This is the end of the content of "what's the difference between rgba and opacity of CSS". Thank you for your reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.