Advanced usage of CSS3 RGBA properties

Author：Eve Cole Update Time：2010-03-10 16:01:31

Let’s talk about the advanced usage of RGBA attributes that are currently widely used in CSS3. The compatibility issue of this attribute is relatively simple. IE8 already supports this attribute, and IE6 and IE7 can also support it through hacks. RGBA is similar to the RBG attribute in CSS2, except that the RGBA attribute has an additional definition of transparency. The explanation of the RGBA attribute in the CSS3 standard is as follows:

/*Basic syntax*/
em { color : Rgba ( red , green , blue , opacity ) }
/* Example*/
em { color : rgba ( 255 , 0 , 0 , 1 ) } /* red, opaque */
em { color : rgba ( 100 % , 0 % , 0 % , 1 ) } /* Same as above*/

In reality, using three decimal values from 1 to 255 to define a color is more accurate than using percentages. The following are the RGB values of several colors. When using it, you only need to convert the hexadecimal values from 00 to FF into Decimal will do.

How to use RGBA attributes

The power of RGBA is that more colors can be presented through the definition of transparency and the mixing of colors in different layers, just like the mixing of paints. For example, we first set a background image for the page, and then set a color for the content in H1 of the page, for example:

h1 {
color : rgb ( 0 , 0 , 0 ) ;
background-color : rgb ( 255 , 255 , 255 ) ;
}

The effect is as follows:

Here you can see that H1 does not have a transparent effect

But what will the effect be if I don't set an overall transparency (opacity attribute) on H1?

h1 {
color : rgb ( 0 , 0 , 0 ) ;
background-color : rgb ( 255 , 255 , 255 ) ;
opacity : 0.5 ;
}

The effect we see here is that the entire H1 including the text is 50% transparent. However, text transparency affects reading. Let’s try using the RGBA attribute to set the background color of H1 separately.

h1 {
color : rgb ( 0 , 0 , 0 ) ;
background-color : rgba ( 255 , 255 , 255 , 0.5 ) ;
}

This is where we can see that the background of H1 is 50% transparent white, but the text inside is still opaque black. Of course, you can also make only the text in H1 transparent.

h1 {
color : rgba ( 0 , 0 , 0 , 0.5 ) ;
background-color : rgb ( 255 , 255 , 255 ) ;
}

Making only the text transparent can be used to create a paper cutout effect. More Usage

RGBA can be used wherever a color needs to be set, for example:

div {
color : rgb ( 0 , 0 , 0 ) ;
background-color : rgb ( 255 , 255 , 255 ) ;
border : 10px solid rgba ( 255 , 255 , 255 , 0.3 ) ;
}

Set the transparency to 30% and a solid white border with a line width of 10px for all divs.

div {
color : rgba ( 255 , 255 , 255 , 0.8 ) ;
background-color : rgba ( 142 , 213 , 87 , 0.3 ) ;
}
div :hover {
color : rgba ( 255 , 255 , 255 , 1 ) ;
background-color : rgba ( 142 , 213 , 87 , 0.6 ) ;
}

Mouse over to change transparency.

In addition, if combined with JavaScript, RGBA attributes can create more dazzling effects.

Change your CSS writing habits

In the above examples you can see that the author has been using rgb() to specify colors instead of using the traditional #xxx form of hexadecimal representation. This is a writing method prepared for the RGBA attribute of CSS3. Using rgb() to specify a color can be understood as rgba() being opaque, but the difference between the two is very small, which will bring great convenience to upgrading to rgba() in the future.

Compatible with all browsers

Although the latest versions of mainstream browsers already support RGBA attributes, we must also take care of users who use older browsers, so in some places we will be safer using the old method. There are several methods, and everyone can choose according to their needs.

1. Lower versions do not use the RGBA attribute.

Although this will affect the effect in lower version browsers, this is the simplest method and the safest method. The specific operations are as follows:

h1 {
color : rgb ( 127 , 127 , 127 ) ;
color : rgba ( 0 , 0 , 0 , 0.5 ) ;
}

Set the rgb color first and then set the rgba color, so that browsers that do not support the rgba attribute will only display the rgb color, while browsers that support rgba will display the rgba color due to redefinition.

2. Use a transparent PNG image as the background.

The advantage of the PNG format is that the transparency feature in the image can be displayed on the web page. This feature is used here.

h1 {
background : transparent url ( black50.png ) ;
background : rgba ( 0 , 0 , 0 , 0.5 ) none ;
}

The same effect as rgba is achieved through a PNG background with a transparency of 50%.

3. IE hack

can use IE's private attributes to solve IE6 and IE7, which can achieve some of the same effects as rgba.

h1 {
filter :progid :DXImageTransform .Microsoft .Gradient ( GradientType = 1 , StartColorStr = '#80000000' , EndColorStr = '#80000000' ) ;
}

What we need to pay attention to is the value of StartColorStr and EndColorStr. The first two digits are hexadecimal transparency, and the last six digits are hexadecimal color.

Original link: Advanced usage of CSS3 RGBA attributes.

Thanks to bolo for his contribution.