CSS3 RGBA attributes advanced usage

It seems that the discussion on CSS3 on the Internet is very popular recently. Now let's talk about the advanced usage of the wide range of RGBA attributes in CSS3. The compatibility of this attribute is relatively simple. IE8 supports this attribute, and IE6 and IE7 can also be supported by hack. The RBG attribute in RGBA and CSS2 is similar, but the RGBA attribute has a definition of transparency. The RGBA attribute is interpreted as follows in CSS3:

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

In reality, use three ~ The decimal value of 255 is more accurate to define a color than the percentage. The following is the RGB values of several colors. You only need to set 00 ~ Convert the hexadecimal value of FF to decimal.

How to Use RGBA attributes

The strength of RGBA is that the definition of transparency and the color mixing of different layers can present more colors, just like the mixture of pigments. For example, we first set a background image for the page, and then set a color for the content in H1, for example:

H1 {
Color: rgb (0, 0, 0 );
Background-color: rgb (255,255,255 );
}

The effect is as follows:

Here we can see that H1 is not transparent.

But if I didn't set an overall transparency (opacity attribute) for H1, what would happen?

H1 {
Color: rgb (0, 0, 0 );
Background-color: rgb (255,255,255 );
Opacity: 0.5;
}

The effect we can see here is that the entire H1, including the text, shows 50% transparency. However, text transparency affects reading. We can use 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 );
}

We can see that the H1 background is 50% transparent white, but the text in it is still opaque black. Of course, you can only make the text in H1 transparent.

H1 {
Color: rgba (0, 0, 0, 0.5 );
Background-color: rgb (255,255,255 );
}

Only make the text transparent and can be used to create the paper-cut effect.

• 2 pages in total:
• Previous Page
• 1
• 2
• Next Page