css3 color note_html/css_WEB-ITnose-HTML Tutorial-php.cn

css3 color note_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:41:12

Original

1340 people have browsed it

css3 color

opacity

Make the element appear translucent.

opacity:alphavalue || inherit

Copy after login

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>

Copy after login

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)

Copy after login

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;}

Copy after login

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)

Copy after login

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;}

Copy after login

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>)

Copy after login

div{   width:100px;   height:100px;   background:hsla(360,50%,30%,0.5);   order:1px solid;}

Copy after login

CSS3 color complete. The road of learning is endless