Shulou(Shulou.com)06/01 Report--

Editor to share with you what is the role of hsla () in css3. I hope you will get something after reading this article. Let's discuss it together.

In css3, the hsla () function is used to define colors using hue, saturation, luminance, and transparency. The syntax "hsla (hue, saturation, luminance, transparency)"; the range of hue values is "0% 100%", the range of saturation and luminance is "0% 100%", and the range of transparency is "0% 1".

The operating environment of this tutorial: windows7 system, CSS3&&HTML5 version, Dell G3 computer.

In css3, the purpose of hsla () is to define colors.

The hsla () function defines colors using hue, saturation, brightness, and transparency.

HSLA means hue, saturation, brightness and transparency (English: Hue, Saturation, Lightness, Alpha).

Hue (H) is the basic attribute of color, which is commonly referred to as the color name, such as red, yellow and so on.

Saturation (S) refers to the purity of the color, the higher the color, the purer the color, and the lower the color will gradually turn gray, taking a value of 0-100%.

The brightness (L) is 0-100%. If you increase the brightness, the color will change to white; if you decrease the brightness, the color will change to black.

The value of transparency (A) is between 0,1, which represents transparency.

Syntax:

Hsla (hue, saturation, lightness, alpha) values describe hue-hue definition hue (0to 360hue)-0,120,120,240for blue saturation-saturation; 0% gray, 100% panchromatic lightness-luminance defines luminance 0% dark, 50% normal, 100% white alpha-transparency defines transparency 0 (fully clear) ~ 1 (completely opaque)

Example:

# p1 {background-color:hsla (120100% precinct 50% 0.3);} # p2 {background-color:hsla (120100% beacon 75% 0.3);} # p3 {background-color:hsla (120100% p25% 0.3);} # p4 {background-color:hsla (120,0100% 70% 0.30);} # p5 {background-color:hsla (290100% 50% 0.3);} # p6 {background-color:hsla (29060% 70% 0.3);}

HSL color and use transparency:

Green

Light green

Dark green

A soft green

Purple

A soft purple

After reading this article, I believe you have a certain understanding of "what is the role of hsla () in css3". If you want to know more about it, you are welcome to follow the industry information channel. Thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.