CSS3 新引入的颜色度量单位、与可设置的透明度都令人兴奋。
前言
W3C 标准化组织定义的标准 16中颜色名称分别是:
- aqua 水蓝
- black 黑
- blue 蓝
- fuchsia 紫红
- gray 灰
- green 绿
- lime 绿黄
- marron 酱紫
- navy 深蓝
- oblive 橄榄绿
- purple 紫
- red 红
- silver 银
- teal 青
- white 白
- yellow 黄
CSS2 中的颜色是基于红(Red)、绿(Green)、蓝(Blue)模型的(RGB),不论使用十六进制表示法还是RGB颜色值,都需要把这三种颜色组合起来,才能为页面添加颜色。这种模型对于开发人员来说是痛苦的,因为设计师所需要的颜色各种各样,往往还需要控制深浅度和色调,所以开发人员不得不使用第三方软件去找到精确匹配的色调。
CSS3颜色模块针对这个问题提供了解决方案。除此之外,还引入了更多的内容。
使用opacity属性设置透明度
透明度,严格来讲,是估量一个对象对光线的阻力——某种东西更加不透明,表示它允许透过的光线就更少;某种东西的透明度更高,它允许通过的光线就更多。一个没有透明度的对象是完全不透光的,而一个没有不透明度的对象则是完全透明的。在 CSS 中,二者均使用 opacity
属性来度量。本质上,对于 opacity
,我们设置的是背景在多大程度上可以透过指定的元素看到。
opacity
属性语法如下:
|
|
number 是一个介于 0~1 之间的小数,其中 0 表示完全透明,1 表示完全不透明。
这个属性有一点非常特殊:opacity
属性的值会被它的所有子元素继承,并且子元素所继承的 opacity
属性值的设置不能够被其他任何属性覆盖,另外子元素的 opacity
属性值只能向下覆写而不能向上覆写。也就是,我们永远不可能让子元素比它的父元素更加不透明。
Alpha通道
和 opacity
属性相似,Alpha 通道(简称 Alpha)是对一种颜色透明度的度量。所以,尽管使用 Alpha 的颜色值可以像其他任何颜色值一样被子元素所继承,但元素的整体不透明度并不受影响。
CSS3 引入 Alpha 作为 RGBA 颜色模型中的一个值。RGBA 中的 RGB 即是 CSS2 中的 RGB 模型,A 就是 CSS3 新引入的 Alpha。其语法如下:
|
|
alpha
参数的值和 opacity
的参数值语法是一样的,是一个 0~1 之间的小数。
rgba
和 opacity
的区别在与,前者是一个颜色值,而后者是控制元素的透明度的;另外,前者只能精确地应用到它指定的元素上,而后者所应用的元素的所有子元素都会继承其特性。
RGBA优雅降级
不支持 RGBA 的浏览器会忽略其所声明的颜色值。为了优雅降级,我们应该制定两次颜色:
|
|
但是这样做,一定要注意,确保优雅降级后不会影响到最终的设计效果。
HSL
HSL 中的三个字母分别代表 Hue(色度)、Saturation(饱和度)、Lightness(亮度)。
要使用 HSL 定义一个颜色,首先必须在 0~359 的颜色环中为色调选择一个值。任何更高的值只是 0~359 的重复,例如红色的数值为 0,所以 360 和 720 也是红色。
在颜色环中,作为最基本颜色的红、绿、蓝分别被分为 120’,所以纯红、纯绿和纯蓝的数值分别为 0、120、240。处于这些数值之外的值表示构成基本颜色外不同比例的色调。
接着需要饱和度等级,它是 0~100 间的百分数值。该值用以确定色彩显示的褪色或鲜明程度。饱和度值以中灰色(0%)环中心点为起点,随着环向外延伸,色彩变得越发鲜明(饱和度最大值为100%)。
最后就是色彩的亮度,亮度的取值也是从 0~100 的百分数值。值为 50% 时色彩最饱满、亮度最高,数值越低,颜色越暗直至黑色(0%)。数值越高,颜色越亮,直至白色(100%)。可以将这种颜色想象成在颜色重混合了黑色和白色。
因此,为了选择一个完全饱和、具有标准亮度的黄色,可使用如下代码:
|
|
HSL 就好像是所有可能的 RGB 颜色被映射到三维之中。所有可能的颜色被安排在一个带有中心轴的圆柱体中,围绕该中心轴的角度就是色度(H),与该中心轴的距离就是饱和度(S),而沿着轴线距离就是明度(L)。
色度代表主要颜色,从红色开始和结束(0或者360度),并包括了这中间所有的主要颜色。色度就是指向某个特定颜色的圆周的角度。
饱和度就是该颜色的最强度或者力度:0%就是没有强度,会让颜色变得稍微有些灰色,而 100% 就是全部强度,是该颜色的最强版。
明度就是颜色明暗程度,50%是真实色度,0%是黑色,而 100%是白色。
HSL的语法如下:
|
|
hue 接受的值从 0 至 360,而 saturation 和 lightness 接受的值则是从 0% 至 100%。
下表是四种颜色值写法常见的颜色等效值:
HSL | RGB | 十六进制数 | 关键字 |
---|---|---|---|
0,0%,0% | 0,0,0 | #000000 | black |
360,0%,100% | 255,255,255 | #FFFFFF | white |
0,100%,50% | 255,0,0 | #FF0000 | red |
120,100%,25% | 0,128,0 | #008000 | green |
240,100%,50% | 0,0,255 | #0000FF | blue |
这一表格实际上没有表述全部实情,许多不同值的组合也可以创造出白色。
HSLA
HSL 也可以利用 Alpha 通道实现扩展,与 RGBA 类似:
|
|
颜色变量currentColor
CSS3 新引入了一个颜色值关键字 currentColor
。这个关键字的作用更像是一个变量,也就是说它的值是继承的。它可以应用在文档树中的不同位置。一个元素的 currentColor
值是它自己的 color
属性值,并且像 color
一样,currentColor
可以被继承。
下面以实例说明:
|
|
上述代码展示了 currentColor
的用法,它就像一个变量一样,保存着继承而来的 color
值,使用这个属性的好处是如果需要修改属性,不用再对每个子元素就行修改了,可以直接修改父元素的 color
值,前提是子元素的颜色设置都是通过 currentColor
实现的。
匹配操作系统外观
CSS3 中有一个属性 appearance
,用于设置元素外观按照本地默认样式显示。
|
|
其中,关键字值 keyword 的值来自于用户界面元素的一长串列表。在此不赘述。