What is rgba in css3

rgba is a function that defines color in CSS3. The syntax is "rgba(R,G,B,A)", which represents red (R), green (G), blue (B) and transparency. (A) changes and superimposes each other to obtain various colors; the value range of parameters R, G, and B is "0~255", and the value range of A is "0~1".

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

RGB is a color standard, which is a variety of colors obtained by the changes and superposition of red (R), green (G), and blue (B). RGBA is based on RGB and adds parameters to control alpha transparency.

Syntax:

rgba(R,G,B,A)

Parameters:

R: red value. Positive integer | Percent

G: Green value. Positive integer | Percent

　B: Blue value. Positive integer | Percent

　A: Transparency. Value range between 0 and 1

Value range:

　: Hue (hue). 0 (or 360) represents red, 120 represents green, and 240 represents blue. Of course, other values ​​​​can be used to determine other colors;

　: Saturation (saturation). The value is a value between 0% and 100%;

　: Lightness (brightness). The value is a value between 0% and 100%;

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

Simple explanation:

RGB color mode (also translated as "red, green and blue", less commonly used) is the industrial A color standard that obtains various colors by changing the three color channels of red (R), green (G), and blue (B) and superimposing them on each other. RGB represents The colors of the three channels of red, green and blue, this standard includes almost all colors that human vision can perceive, and is one of the most widely used color systems currently.

RGBA has additional parameters to control Alpha transparency based on RGB. For the above three parameters R, G, and B, the positive integer value range is: 0 - 255. The value range of the percentage value is: 0.0% - 100.0%. Values ​​outside the range are rounded to the nearest value limit. Not all browsers support using percentage values. The A parameter has a value between 0 and 1 and cannot be negative.

Browser compatibility:

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

Now let's take a look at a comparison example of RGBA and Opacity. HTML code:

<div class="example-opacity">
  <p>Opacity效果</p>
  <ul>
   <li class="opacity opacity1">100%</li>
   <li class="opacity opacity2">80%</li>
   <li class="opacity opacity3">60%</li>
   <li class="opacity opacity4">40%</li>
   <li class="opacity opacity5">20%</li>
   <li class="opacity opacity6">0</li>
  </ul>
  <p>CSS3的RGBA效果</p>
  <ul>
   <li class="rgba rgba1">1</li>
   <li class="rgba rgba2">0.8</li>
   <li class="rgba rgba3">0.6</li>
   <li class="rgba rgba4">0.4</li>
   <li class="rgba rgba5">0.2</li>
   <li class="rgba rgba6">0</li>
 </ul>
</div>

We apply relevant styles to the li in these two uls respectively. In li.opacity, I use Use Opacity in CSS2 and in li.rgba we use the new RGBA property of CSS3.

Opacity style

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

RGBA sample:

li.rgba {
  float: left;
  width: 50px;
  height: 50px;
}
li.rgba1 {
  background: rgba(255,255,0,1);
}
li.rgba2 {
  background: rgba(255,255,0,0.8);
}
li.rgba3 {
  background: rgba(255,255,0,0.6);
}
li.rgba4 {
  background: rgba(255,255,0,0.4);
}
li.rgba5 {
  background: rgba(255,255,0,0.2);
}
li.rgba6 {
  background: rgba(255,255,0,0);
}

Let’s take a look at its effect:

We have the effect It can be seen that the similarity between them is that the background color is exactly the same, but the difference is the problem that has always given everyone a headache, that is, the descendant elements of Opacity will have transparency along with it, so the words in our Opacity will have transparency value along with it. The drop is becoming increasingly unclear, whereas RGBA does not have such a problem.

(Learning video sharing: css video tutorial, web front-end)

The above is the detailed content of What is rgba in css3. For more information, please follow other related articles on the PHP Chinese website!