作者:手机用户2502897855 | 来源:互联网 | 2020-08-14 07:06
颜色广泛用于CSS,无论是文本颜色,背景颜色,渐变,阴影,边框......都需要定义颜色的方法,每种颜色的定义方法都各有利弊。本篇文章就来给大家分享一下css中颜色的不同定义方式。
颜色广泛用于CSS,无论是文本颜色,背景颜色,渐变,阴影,边框......都需要定义颜色的方法,每种颜色的定义方法都各有利弊。本篇文章就来给大家分享一下css中颜色的不同定义方式。
color属性定义文本的颜色很简单,更重要的是颜色的定义可以用的不同类型的颜色单位。(推荐课程:css视频教程)
颜色名称
CSS提供了由一百四十多种颜色名称,从最基本颜色都一些更丰富的颜色可以说是丰富多彩。
body{ color: black;}
a{ color: orange;}
上述例子是用具体的颜色名称来定义的,但是因为颜色名称很难记住,并且可能你想要非常特定的颜色,所以颜色的名称可能就不太好用了,下面我们就来看看其他的用于定义颜色的方式
RGB
电脑显示器,电视,手机都使用RGB颜色模型来显示颜色。基本上,每种颜色都由红色,绿色和蓝色组合定义。红色,绿色或蓝色有256个可能的值。由于计算机从0(零)开始计数,因此最大值为255。
考虑到颜色是红色,绿色和蓝色组合的结果,并且因为这3种颜色中的每一种都具有256种可能的值,所以256 * 256 * 256 = 16,777,216可以使用颜色。
由于RGB模型与物理渲染颜色的方式直接相关,因此它已成为CSS颜色单元。
例如,你可以定义红色为219红色,78为绿色,68为蓝色:
a{ color: rgb(219, 78, 68);}
黑色不是红色,绿色或蓝色:
body{ color: rgb(0, 0, 0);}
在光谱的另一边,白色是每个红色,绿色和蓝色的全部量:
body{ color: rgb(255, 255, 255);}
RGBA
rgba色彩单元是rgb,这是我们添加的α值(范围从0到1,在十进制值),它定义了颜色透明度是什么:
body{ color: rgba(0, 0, 0, 0.8);}
略带透明的黑色。
颜色透明的目的是与背景混合,因此根据上下文看起来略有不同。它对背景颜色特别有用。
HSL和HSLA
HSL是另一种定义颜色的方法。把它想象成一个色轮。
粘贴单个字段比3个单独的字段更容易。
在CSS中,您只需要在哈希前面添加十六进制颜色值#。
选择哪一个?
如果您不打算使用任何透明颜色,请坚持使用十六进制值,因为它们更容易复制/粘贴,并且不会在代码中占用太多空间。
如果您想要一些透明度,请将颜色从十六进制转换为rgba,然后使用rgba颜色单位。
如果您想直接在浏览器中使用颜色,可以使用hsl。
以上就是css颜色:css中颜色的不同定义方式介绍的详细内容,更多请关注 第一PHP社区 其它相关文章!