Example description of using RGBA to adjust transparency in CSS3

This article mainly describes the CSS3 in the use of RGBA to adjust the transparency of the tutorial, Rgba is an extension of the RGB color model, the acronym represents the first letter of the red, green and blue primaries, the alpha value represents the color transparency or opacity, the need for friends can refer to the next

In CSS3, a opacity attribute is added, allowing the developer to set the transparency of the element, now opacity is supported by the mainstream modern browser, but the opacity will set the element and its child elements together to the same transparency, such transparent rules are rather inflexible, In the actual development often also encountered a lot of trouble. In fact, there is another set of color-transparent solutions--rgba in CSS3. In contrast to opacity, RGBA can set transparency on a single element without affecting its child elements, but Rgba browser support is not opacity wide, so it is relatively less noticeable to developers.

RGBA (R,g,b,a)
Value:
R: Red value. Positive integers | Percentage
G: Green value. Positive integers | Percentage
B: Blue value. Positive integers | Percentage
A:alpha transparency. Value between 0~1.
Here is the white with RGBA () setting 50% transparency.

P {   Color:rgba (255, 255, 255, 0.5);   }

RGBA is an extension of the RGB color model. This abbreviation represents the first letter of the red, green, and blue primaries, and the alpha value represents the transparency/opacity of the color.

The RGBa colors are described in detail below.

I. RGBa Color Basics
The RGBa is essentially an alpha channel added to the set element, i.e. a channel that represents transparency in addition to the red, green, and blue three color channels, where the RGB values are represented in red, green, and blue using the 3 0 to 255 integers we are familiar with, and the alpha value is 0 to 1 (decimal place). The following example shows an example of how it is used:

In CSS 2.1, the use of RGB color declarations is supported (although developers may be more accustomed to using a 16 binary representation of the #343434), for example, to set the background color #343434 for p elements with ID example, you can write

/* RGB representation */#example {Background:rgb (52, 52, 52);}

Then use RGBa to change the background color in the example to 0.5 transparency.

/* Set 0.5 transparency */#example-a {Background:rgba (0.5);}   /* You can also omit 0 */#example-a {Background:rgba (52, 52, 52,. 5) before the decimal point;}

The effect of increasing transparency is as follows (in order to reflect more clearly the effect of transparency, the body of the example adds a background texture):

As can be seen, RGBa only in the original RGB based on the addition of a parameter, this change is small, but for developers to provide a great convenience.

In addition, RGBA can be used in addition to the background property, but also in the color and Border properties (note: The border attribute using RGBa in Firefox will be slightly different from the effect in other browsers).

Two. browser support and progressive enhancement
Although RGBA has been well supported in mainstream modern browsers, where Webkit's support for Rgba was the earliest, Chrome was able to support Rgba at least in the 0.415 release, and in this regard chrome could be said to be very strong, plus Gecko and Pres To the kernel also gradually achieved the support of RGBA, IE browser from IE9 to support RGBA. More specific browser support scenarios include the following:

Chrome 0.4.154.33+, Firefox 3.0+, Safari 3.2.1+, Opera 10.10+, ie9+

For more detailed browser support, please refer to here.

For browsers that do not support RGBa, this can be solved with a gradual enhancement, and Kayo recommends a solution that specifies a color retention scheme. First, developers must be aware that browsers that do not support RGBA will treat CSS property values that use Rgba as grammatical errors, and therefore ignore the CSS property settings. As a result, developers can set an RGBA color before setting a property that does not use transparency, to avoid the case when the browser does not support RGBA when there is no color at all. The following example is extended to illustrate:

#example1 {Background:rgb, Background:rgba (52, 52, 52,. 5);
Browsers that do not support RGBa ignore the second Background property setting, setting the background color of the element according to the first property value, so that it does not make the same effect for the browser, but it has achieved similar results, and embodies a good progressive enhancement solution.

Of course, for IE, you can use filters to achieve the same effect as in the support RGBa browser, for example: For the above example, you can write code like this

<style type= "Text/css" >       #example-a {Background:rgba (n. 5);}   </style>   <!--[if ie]>       <style type= "Text/css" >           #example-a {               background: transparent;               Filter:progid:DXImageTransform.Microsoft.gradient (startcolorstr= ' #34343432 ', endcolorstr= ' #34343432 ');               zoom:1;           }        </style>   <![ Endif]-->

It is important to note that the filter uses the same color and transparency as in the previous example, and only uses the 16 binary notation.

IE ignores the RGBA color setting and sets the color according to the filter filter, which works the same as Rgba.

Three. Do not affect child elements
As already described at the beginning of the article, the advantage of RGBa relative to opacity is that it does not affect its child elements, that is, you can set the transparency individually for the element being set, and the child element is not affected by the setting. In the following example, a specific example, respectively, RGBa and opacity to set the transparency of the element to explain the difference between the two.

Full code:

<! DOCTYPE html>   
Specific effects

As you can see, opacity makes the child element span at the same time translucent, whereas RGBA changes only the transparency of the element being set, whereas in most cases the developer only needs to set the transparency of the current element (such as matte, translucent background, etc.), so using RGBA is more flexible.

In addition, in IE9, the effect of using the RGBa color directly with the opacity setting is different (readers can browse the Demo to see the specific effect under IE9), and developers need to be aware of this difference.

Related articles:

CSS set an element translucent

CSS3 Tutorial (8): CSS3 Transparency Guide

Implement CSS3 opacity complete code