Css rgba/hsla knowledge point explanation and translucent border, rgbahsla

Css rgba/hsla knowledge point explanation and translucent border, rgbahsla
I. RGBA (R, G, B,)

Parameters:

R: Red value. Positive Integer | percentage

G: green value. Positive Integer | percentage

B: Blue. Positive Integer | percentage

A: Alpha transparency. Value Range: 0 ~ Between 1.

Note: This color mode is the same as RGB, but the Alpha transparency is added in RGB mode.

The RGBA color is supported by the following browsers: IE9 +, Firefox 3 +, Chrome, Safari, and Opera 10 +.

 

Ii. HSLA (h, s, l,)

 

HSL refers to hue, saturation, and lightness, which represent the coordinate representation of the color cylindrical.

The HSL color value is defined as follows: hsl (hue, saturation, lightness ).

Hue is the degree on the Color disk (from 0 to 360)-0 (or 360) is red, 120 is green, 240 is blue.

Saturation is a percentage value; 0% indicates gray, and 100% indicates full color.

Lightness is also a percentage value; 0% is black and 100% is white.

 

The HSLA color value is an extension of the HSL color value, with an alpha channel-it specifies the opacity of the object.

The HSLA color value is defined as follows: hsla (hue, saturation, lightness, alpha), where the alpha parameter defines opacity. The alpha parameter is a number between 0.0 (completely transparent) and 1.0 (completely opaque.

HSLA colors are worth the support of the following browsers: IE9 +, Firefox 3 +, Chrome, Safari, and Opera 10 +.

 

Small applications:Translucent border

Add a white background and a translucent white border to a container:

At first, I wrote it like this:

div{border:10px solid  hsla(0,0%,100%，.5);background:white;}body{background:pink}

Problems found:

Translucent border does not work:

 

 

What's going on? Query Information later:

Actually, the Border exists, but the container's own white background passes through the white border, instead of the background of the body element passing through the white border (this is what we want ), in fact, the effect is exactly the same as that of the pure white solid border.

Solution:

In css 2.1, this is how the background works. We can only accept and look forward. Fortunately, we can adjust the confusion caused by the above default behavior through the background-clip attribute.

Background-clip

The default value is border-box, which indicates that the background will be trimmed by the border box of the element. If you do not want the background to intrude into the territory of the border, you can use another value of the border.Padding-box.

In this way, the browser will crop the background with the outer edge of the padding.

div{border:10px solid  hsla(0,0%,100%，.5);background:white;background-clp:padding-box;}body{background:pink}

 

 

 

Look OK ~