Example of using RGBA to set transparency in CSS3

Description

RGBA (R,g,b,a)

Take value:

R: Red value. Positive integer | Percentage

G: Green value. Positive integer | Percentage

B: The blue value. Positive integer | Percentage

A:alpha transparency. Between values 0~1.

Here is the white with Rgba () set 50% transparency.

CSS code copy content to clipboard

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 format of the RGBA color notation is::

CSS code copy content to clipboard

RGBA (red, green, blue, alpha)

The first three values (red, green and blue) range from 0 to 255 integers or percentages between 0% and 100%. These values describe the amount of red, green, and blue three primary colors in the desired color.

If you want to set the pure red, then set the red parameter full, that is, 255, green, blue set 0.

CSS code copy content to clipboard

Background-color:rgba (255, 0, 0, 1);

Results:

You can also use percentages:

CSS code copy content to clipboard

Background-color:rgba (100%, 0%, 0%, 1);

Results:

The fourth value, alpha, is the transparency/opacity of the color, which ranges from 0.0 to 1.0

The following example is a yellow setting of 50% transparency:

CSS code copy content to clipboard

Color:rgba (255, 242, 0, 0.5);

Results: