A brief explanation of the difference between RGBA and Opacity_html/css_WEB-ITnose

Previous article: "Creating a Silver MacBook Air with Pure CSS (2)"

RGBA and Opacity are both related to transparency, but what is the difference between them? Maybe some friends can't think of it at the moment, it doesn't matter, just look down quietly.

Let’s take a brief look at RGBA first:

Syntax

rgba(r,g,b,a)

Value description

R: red value. Positive integer | Percentage
G: green value. Positive integer | Percent
B: Blue value. Positive integer | Percent
A: Alpha transparency. The value is between 0~1.
A positive integer is any value between 0 and 255 in decimal, and a percentage is any value between 0% and 100%.

RGBA adds an alpha channel to the R (Red) G (Green) B (Blue) mode. The alpha channel is opacity , that is, if the alpha channel value of an element is 0% (or 0), then the element is completely transparent (that is, invisible, but the elements under it can be seen through the element), and the value is 100% (or 255) means that the element is completely opaque.

Let’s look at Opacity again:

Syntax

opacity: value|inherit;

Value description

value: Opacity, from 0.0 (fully transparent) to 1.0 (fully opaque).

Tip: IE8 and earlier support alternative filter attributes. For example: filter:Alpha(opacity=50).

You can click here to view the effect of different opacity values.

RGBA and opacity are both used to set the opacity of elements, so what is the difference between the two?

Difference

opacity will inherit the opacity attribute of the parent element, while the descendant elements of the RGBA set element will not inherit the opacity attribute. The difference between the two can be viewed by clicking here, or you can modify the attribute value in codepen to view the effect under other opacity, or you can directly see the implementation and texture effect below :

   		.rgba{		background: rgba(255,0,0,0.5);	}	.opacity{		background: red;		opacity: 0.5;	}

As you can see from the picture, the text inside the div that sets the Opacity attribute is also semi-transparent, while the text inside the div that sets the RGBA attribute is not inherited. Transparency.

Note: The opacity values ​​of RGBA and Opacity in this example are both 0.5.

So RGBA is still superior to Opacity. Of course, anything involving color can be set using RGBA, such as the background-color, text-shadow, and box-shadow used above.

Small note: This article is Markdown with a small amount of HTML editing

Next article: "Pure CSS to create a silver MacBook Air (2)"