Today I saw a new definition color attribute HSL, which was not used before, here is a note to learn
【Overview】
Like hexadecimal and RGB to define colors, css3 also supports HSL (hue, saturation, lightness definition
【compatible】
Supported browsers are Chrome, Opera 9.5, Safari 3, Konqueror and Mozilla, IE8 and below are not supported
【Details】
Using the hsl method, there are three parameter values: Hue, saturation, and Lightness
①hue (hue): 0 (or 360) means red, 120 means green, 240 means blue, of course, other values can be taken to determine other colors;
②Saturation: the value is between 0% and 100%;
③Lightness: the value is between 0% and 100%
【grammar】
1. Red background
background-color: hsl(0,100%, 50%);
2. Transparency HSLA
HSLA------similar to RGBA (RGBA refers to an additional parameter that controls alpha transparency based on RGB, with a value between 0 and 1)
HSLA is an additional parameter to control alpha transparency based on HSL, with a value between 0 and 1
For example: a red background with a transparency of 0.2
background-color: hsla(0,100%, 50%,0.2);
With these new color definition methods, we can be more flexible when defining colors in the future.
.