Home > Article > Web Front-end > css3 color note_html/css_WEB-ITnose
css3 color note_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:41:121316browse
css3 color
opacity
Make the element appear translucent.
opacity:alphavalue || inherit
Alphavalue: The default value is 1, it can be any floating point number from 0 to 1. When the value is 1, the element is completely opaque; when the value is 0, the element is completely transparent. Cannot be a negative value.
Inherit: Indicates inheriting the value of the opacity setting of the parent element.
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style> div{ width:100px; height:100px; background:#ff0000; border:1px solid; opacity:0.3; }</style></head><body> <div>胸无大志者，必受制于人</div></body></html> opacity makes the entire element, including the background and foreground colors, transparent.
RGBA
RGB color mode (also known as the three primary colors) is a color standard in the industry. It uses three color channels: red, green, and blue. changes and their superimposition on each other to obtain various colors. In CSS3, rgba adds parameters to control alpha transparency based on rgb.
rgba(r,g,b,a)
r: red value, which can be a positive integer or a percentage.
g: Green value, its value can be a positive integer or a percentage.
b: Blue value, its value can be a positive integer or a percentage.
a: alpha transparency value, its value is between 0 and 1.
For the above three parameters r, g, and b, the positive integer value ranges from 0 to 255; the percentage value ranges from 0% to 100%. Values outside the range are rounded to the nearest value limit. The value range of parameter a is 0~1. None of the four parameter values can be negative.
div{ width:100px; height:100px; background:rgba(255,0,0,0.3); border:1px solid;} Similar to opacity, both make the element transparent. The only difference is that rgba only makes the background color of the element transparent, and the foreground color remains the same.
HSL
HSL, like RGB, is a color standard in the industry. It controls the three color channels of hue, saturation and lightness. Variations and their superimposition on each other result in a wide variety of colors.
hsl(h,s,l)
h: Hue. Take an integer value, which can be any integer, where 0 (or 360 or -360) represents red, 60 represents yellow, 120 represents green, 180 represents cyan, 240 represents blue, and 300 represents magenta. When their value is greater than 360, the actual value is equal to the remainder after dividing the value by 360.
s: saturation. The depth and vividness of the color are expressed as a percentage and can be any value between 0% and 100%, where 0% represents grayscale and 100% represents the highest saturation.
l: brightness. The value is the same as saturation, 0% is the darkest and 100% is the lightest.
div{ width:100px; height:100px; background:hsl(360,80%,80%); border:1px solid;} HSLA
hsla is an extended mode of hsl, which adds a transparent channel alpha to set the opacity parameters based on hsl.
hsla:(<length>,<percentage>,<percentage>,<opacity>)
div{ width:100px; height:100px; background:hsla(360,50%,30%,0.5); order:1px solid;} CSS3 color complete. The road of learning is endless