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

Most people do not understand the knowledge points of this article "what does rgba in css3 refer to?", so the editor summarizes the following content, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "what rgba refers to in css3" article.

Rgba is a function that defines colors in css3. The syntax is "rgba (R, G), blue (B) and transparency (A). The values of parameters R, G, B and An are in the range of" zero 255 "and" zero zero 1 ".

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

RGB is a color standard, from the red (R), green (G), blue (B) changes and superimposed on each other to get a variety of colors. RGBA is a parameter that controls the transparency of alpha on the basis of RGB.

Syntax:

Rgba (RMagna Gregory BMaga)

Parameters:

R: red value. Positive integer | percentage

G: green value. Positive integer | percentage

B: blue value. Positive integer | percentage

A: transparency. Value between 0 and 1

Value range:

: Hue (tone). 0 (or 360) is red, 120 is green, 240 is blue, and of course other values can be used to determine other colors.

: Saturation (saturation). A value between 0% and 100%

Lightness (brightness). A value between 0% and 100%

: alpha (transparency). The value is between 0 and 1

A brief description:

The RGB color model (also translated as "red, green and blue", which is rarely used) is a color standard in the industry, which obtains a variety of colors through the changes of the red (R), green (G) and blue (B) channels and their superposition. RGB represents the colors of the red, green and blue channels. This standard includes almost all the colors that can be perceived by human vision. Is one of the most widely used color systems at present.

RGBA adds parameters to control the transparency of Alpha on the basis of RGB. The above three parameters R, G, B, positive integer values range from 0 to 255. The range of percentage value is: 0%-100%. Values that are out of range will be subject to their nearest limit. Not all browsers support the use of percentage values. Parameter A, whose value is between 0 and 1, cannot be negative.

Browser compatibility:

If Pang Tong says that RGBA is to make transparent colors (transparent background color, transparent border color, transparent foreground color, etc.), you can't help but think of opacity. He is usually used to make background colors in our CSS2, but if we want to use him to make border colors or foreground colors, then he can only stand on the side, willing and powerless.

Now let's take a look at a comparative example of RGBA and Opacity, the HTML code:

Opacity effect

100% 80% 60% 40% 20% 0

RGBA effect of CSS3

1 0.8 0.6 0.4 0.2 0

We apply the relevant styles to the li in these two ul respectively. I use Opacity in CSS2 in li.opacity and the new RGBA attribute of CSS3 in li.rgba.

Opacity style

Li.opacity {float: left; width: 50px; height: 50px;} li.opacity1 {background: rgb; opacity: 1; filter:alpha (opaity=100);} li.opacity2 {background: rgb; opacity: 0.8; filter:alpha (opaity=80);} li.opacity3 {background: rgb; opacity: 0.6; filter:alpha (opaity=60);} li.opacity4 {background: rgb } li.opacity5 {background: rgb; opacity: 0.2; filter:alpha (opaity=20);} li.opacity6 {background: rgb; opacity: 0; filter:alpha (opaity=0);}

RGBA sample:

Li.rgba {float: left; width: 50px; height: 50px;} li.rgba1 {background: rgba;} li.rgba2 {background: rgba;} li.rgba3 {background: rgba;} li.rgba4 {background: rgba;} li.rgba5 {background: rgba;} li.rgba6 {background: rgba

Let's see how it works:

In the effect, we can see that what they have in common is that the background color is exactly the same, but the difference is always a headache, that is, the elements of future generations of Opacity will be transparent together, so the words in our Opacity will become less and less visible as the transparency value decreases, while RGBA does not have such a problem.

The above is about the content of this article "what is rgba in css3". I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please pay attention to the industry information channel.

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.