CSS3 classic tutorial series-detailed usage of CSS3 RGBA

Color in CSS can be defined in three ways: RGB, RGBA, HSL, and HSLA, hexadecimal color value, and predefined color name. We will discuss this article together today.CSS3. RGB is no stranger to everyone. It is Red Green and Blue. What is RGBA?

Articles you may be interested in

• Recommended articles for Web developers and designers
• 20 brilliant CSS3 feature application demonstrations
• 35 amazing CSS3 animation demos
• 12 beautiful CSS3 button implementation schemes are recommended.
• The Ultimate Collection of 24 practical CSS3 tools

 

RGBA is the color space that represents Red (Red) Green (Green) Blue (Blue) and Alpha (opacity. Although it is sometimes described as a color space, it only adds additional information to the RGB model to form the RGBA that we need to discuss today. If you need more detailed explanation, let's take a look at it with me.

Basic Syntax:

R: Red value. Positive Integer | percentage

G: green value. Positive Integer | percentage

B: Blue. Positive Integer | percentage

A: transparency. Value Range: 0 ~ Between 1

Value range:

<Length>: Hue ). 0 (or 360) indicates red, 120 indicates green, and 240 indicates blue. Of course, other values can be used to determine the colors of the values;

<Percentage>: Saturation (Saturation ). The value ranges from 0% to 100%;

<Percentage>: Lightness (brightness ). The value ranges from 0% to 100%;

<Opacity>: alpha (transparency ). The value ranges from 0 to 1;

Simple Description:

RGB color mode (also translated as "Red, green, and blue", which is rarely used) is a color standard in the industry) the changes of the three color channels and their overlapping to obtain a variety of colors, RGB represents the colors of the red, green, and blue channels, this standard covers almost all colors that human vision can perceive and is one of the most widely used color systems.

RGBA adds a parameter to control Alpha transparency based on RGB. The preceding three parameters are R, G, and B. The value range of a positive integer is 0-255. The value range of the percentage value is 0.0%-100.0%. A value out of the range will be used as of its nearest value limit. Not all browsers support percentage values. Parameter A, with A value ranging from 0 ~ Between 1, cannot be negative.

Browser compatibility:

　　

If Pang Tong says that RGBA is a transparent color (transparent background color, transparent border color, transparent foreground color, etc.), everyone will think of opacity. It is usually used to create a background color in our CSS2, but if we want to use it to make a border color or both to say the foreground color, then he can only stand on the edge, powerless.

Now let's take a look at the comparison between RGBA and Opacity. the HTML code is as follows:

<Div class = "example-opacity"> <p> Opacity effect </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> RGBA Effect of CSS3 </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 the relevant style to the li in the two ul. In li. opacity, I use Opacity in CSS2 and in li. rgba, we use the new RGBA attribute 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 can see from the results that they share the same background color, but the difference is that it always makes everyone feel a headache, that is, the Opacity descendant elements will become transparent together, therefore, the word In Opacity is increasingly invisible as the transparency value drops. RGBA does not have such a problem, but one of the browsers it supports is not supported by IE, which accounts for a large market share, that is why we need to be compatible. I hope IE will be able to implement it earlier.

In CSS2, Opacity can be transparent, and most mainstream browsers support it. Although IE is a little troublesome:

/* IE5 - 7 */filter: alpha(opacity=80); /* IE 8 */-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; /* Everyone else */opacity: 0.8;

Why does RGBA be used instead of Opacity?

From the examples above, we also know that RGBA is more transparent than setting CSS for elements, because a separate color can not affect the transparency of the entire element, but does not affect other attributes of the element, for example, the border and font do not affect the transparency of other elements.

Before RGBA was born, we used Opacity for transparency, but there is a problem here, that is, we used Opacity in the parent element, so its decimal element will be affected, I think everyone has encountered this problem. To solve this problem, we need to add an empty div to place it in a transparent background, then we can use absolute positioning to achieve the desired results. For better understanding, let's look at an example using Opacity. First, let's look at HTML:

<Div class = "bg-box"> <div class = "bg"> <div class = "bg-content"> <p> I am a descendant element of bg, I don't want my prospects to be transparent! What should I do? </P> </div>

Attach the appropriate style to them:

  .bg-box {    width: 200px;    height: 100px;    border: 1px solid #ccc;    background: red;    position: relative;  } .bg {    background: black;    opacity: 0.5;    filter:alpha(opaity=50);    width: 100%;    height: 50px;    position: absolute;    bottom: 0;    left: 0;  }  .bg p {    padding: 5px 10px;    color: white;  } 

Effect:

　　

We can see from the effect that, like in the previous example, the Opacity is set in the div named bg, causing the foreground color of the child element section P to change. If you need to solve this problem, you must stick to Opacity without using other new technologies. Then we need to add an empty layer. In This Place, apply the transparent background layer. First, let's take a look at how to change the HTML structure.

<Div class = "bg-box"> <div class = "bg"> </div> <div class = "bg-content"> <p> I am a descendant of bg. element, I don't want my prospects to be transparent! What should I do? </P> </div>

Now we need to overlap the bg-content and bg layers. In other words, we need to put the transparent background layer separately in another div, and then overlap the content layer and the background layer. In other words, we need to set the transparent color on the div bg, and place the content on the div bg-content and use the positioning function, make sure that the div bg is under the div bg-content. Take a look at the CSS changes:

 .bg-box {   width: 200px;   height: 100px;   border: 1px solid #ccc;   background: red;   position: relative; } .bg {   background: black;   opacity: 0.5;   filter:alpha(opaity=50);   width: 100%;   height: 50px;   position: absolute;   bottom: 0;   left: 0;   z-index: 1;  }  .bg-content {    width: 100%;    height: 50px;    position: absolute;    bottom: 0;    left: 0;    z-index: 10;  }  .bg-content p {     padding: 5px 10px;     color: white;  }

First, we split the div 'bg 'from the HTML, turning it into a sibling relationship with the div 'bg-content', and then positioning them in the same position through CSS, only bg is placed under the control of bg-content (z-index), and transparency is applied to the div of bg. Let's take a look at our changes. The effect is as follows:

　　

Is it more perfect than it was before it was processed. However, this is a bit of trouble. Now the RGBA of CSS3 can help you solve this problem. Let's look at the effect of using RGBA to see if it is exactly the same.

HTML code:

<Div class = "bg-box"> <div class = "bg-content"> <p> I am a descendant element of bg, and I don't want my prospects to be transparent! What should I do? </P> </div>

We only need to apply a background: rgba (); in bg-content to achieve the above effect. Let's take a look at the Code:

  .bg-box {     width: 200px;     height: 100px;     border: 1px solid #ccc;     background: red;     position: relative;  }  .bg-content {     width: 100%;     height: 50px;     position: absolute;     bottom: 0;     left: 0;     background: rgba(0, 0, 0,0.5);  }  .bg-content p{     padding: 5px 10px;     color: white;  }

Effect:

　　

We can clearly see from the comparison of results that the effects are exactly the same as those of Opacity. However, one problem is that IE (except IE9) does not support the RGBA attribute of CSS3.

So we have nothing in IE? The answer is yes. Although IE does not support it, we can't give it to him at all. In this way, we will come up with a new term"Fallback color", It means that I back up a color for IE. If RGBA is not supported, I still give it a color, but it will not affect the browsers supported by RGBA, let's take a look at how to use fallback color.

In fact, it is very simple. We can make an image for it or add only one color for it. Let's just add one color for it. Let's take the previous example, we just need to change the bg-content style:

  .bg-content {     width: 100%;     height: 50px;     position: absolute;     bottom: 0;     left: 0;     background: rgb(0,0,0); /*The Fallback color*/     background: rgba(0, 0, 0,0.5);     -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr=#80000000,endColorstr=#80000000)"; /*Filter for IE8 */         filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr=#80000000, endColorstr=#80000000); /*Filter for older IEs */   }

Note that the values of startColorStr and endColorStr #80000000, the first two of which are hexadecimal transparency 80, that is, the transparency value is 0.5, and the last six digits are hexadecimal colors #000000 (black ). If you don't know how to convert this value like me, you can use the following tool: CSS background color attribute value conversion. You can clickZhigeThe use of IE transition filter and CSS 3 in the RGBA properties to complete the background color transparent effect, on the RGBA-IE-FALLBACK more knowledge can be clicked here to enter.

. Rgba {background: rgb (0.5, 0);/* The Fallback color. Here you can also use an image instead of */background: rgba (0, 0, 0 ); -ms-filter: "progid: DXImageTransform. microsoft. gradient (GradientType = 1, startColorstr = #80000000, endColorstr = #80000000) ";/* Filter for IE8 */filter: progid: DXImageTransform. microsoft. gradient (GradientType = 1, startColorstr = #80000000, endColorstr = #80000000);/* Filter for older IEs */}

The color value in the above Code can be modified according to your needs. Here is only a representative value.

We mentioned in the previous article that we can not only apply RGBA to background, but also to any color setting, here are some simple examples:

First: foreground color

HTML:

<P class = "norgba-color"> Use rgba to change the font color </p> <p class = "rgba-color"> Use rgba to change the font color. </ p>

CSS style:

.norgba-color {  color: rgb(255, 0, 0);}  .rgba-color {  color: rgb(255, 0, 0);  color: rgba(255, 0, 0,0.5);}

Effect:

　　

Border color border-color

HTML:

<P class = "norgba-border-color"> Use rgba to change the border color </p> <p class = "rgba-border-color"> Use rgba to change my border color border color </p>

CSS style:

.norgba-border-color {   border:5px solid rgb(255,0,0);   width: 200px;}  .rgba-border-color {   border:5px solid rgb(255,0,0);   border:5px solid rgba(255,0,0,0.5);   width: 200px;}

Effect:

　　

Third: the shadow color of the font, text-shadow

HTML:

<P class = "norgba-text-shadow"> change my font shadow color with rgba </p> <p class = "rgba-text-shadow"> change me with rgba font shadow color </p>

CSS:

 .norgba-text-shadow {   text-shadow : 0 2px 1px rgb(255,0,0); } .rgba-text-shadow {   text-shadow : 0 2px 1px rgb(255,0,0);   text-shadow : 0 2px 1px rgba(255,0,0,0.3); }

Effect:

　　

Fourth, change the border shadow color.

HTML:

<P class = "norgba-box-shadow"> change the shadow color of my border with rgba </p> <p class = "rgba-box-shadow"> change me with rgba border shadow color </p>

CSS:

  .norgba-box-shadow {     border: 5px solid green;     width: 200px;     -webkit-box-shadow: 0 2px 2px rgb(255,0,0);     -moz-box-shadow: 0 2px 2px rgb(255,0,0);     box-shadow: 0 2px 2px rgb(255,0,0);  }  .rgba-box-shadow {     border: 5px solid green;     width: 200px;     -webkit-box-shadow: 0 2px 2px rgba(255,0,0,0.6);     -moz-box-shadow: 0 2px 2px rgba(255,0,0,0.6);     box-shadow: 0 2px 2px rgba(255,0,0,0.6);  }

Effect:

　　

In the end, we need to tell you that only browsers that support the RGBA attribute can display RGBA normally. If you want to use RGBA, consider the differences. So here I will introduce the RGBA of CSS3. I hope it will help you learn and hope that like-minded friends can explore and study together and make progress together.

In-depth reading

• Colors in CSS
• CSS3 RGB & RGBA
• A brief introduction to Opacity and RGBA
• RGBA colors
• Yay for HSLa
• Color (CSS data type)
• CSS Color Module Level 3

 

Articles you may be interested in

• Recommended articles for Web developers and designers
• 20 brilliant CSS3 feature application demonstrations
• 35 amazing CSS3 animation demos
• 12 beautiful CSS3 button implementation schemes are recommended.
• The Ultimate Collection of 24 practical CSS3 tools

 

Link to this article: CSS3 getting started Tutorial: CSS3 RGBA (from: W3CPLUS)

Source: Dream sky ◆ focus on Web Front-end development technology ◆ share Web design resources