CSS3之美(九):颜色与不透明度

CSS3 新引入的颜色度量单位、与可设置的透明度都令人兴奋。

前言

W3C 标准化组织定义的标准 16中颜色名称分别是:

  1. aqua 水蓝
  2. black 黑
  3. blue 蓝
  4. fuchsia 紫红
  5. gray 灰
  6. green 绿
  7. lime 绿黄
  8. marron 酱紫
  9. navy 深蓝
  10. oblive 橄榄绿
  11. purple 紫
  12. red 红
  13. silver 银
  14. teal 青
  15. white 白
  16. yellow 黄

CSS2 中的颜色是基于红(Red)、绿(Green)、蓝(Blue)模型的(RGB),不论使用十六进制表示法还是RGB颜色值,都需要把这三种颜色组合起来,才能为页面添加颜色。这种模型对于开发人员来说是痛苦的,因为设计师所需要的颜色各种各样,往往还需要控制深浅度和色调,所以开发人员不得不使用第三方软件去找到精确匹配的色调。

CSS3颜色模块针对这个问题提供了解决方案。除此之外,还引入了更多的内容。

使用opacity属性设置透明度

透明度,严格来讲,是估量一个对象对光线的阻力——某种东西更加不透明,表示它允许透过的光线就更少;某种东西的透明度更高,它允许通过的光线就更多。一个没有透明度的对象是完全不透光的,而一个没有不透明度的对象则是完全透明的。在 CSS 中,二者均使用 opacity 属性来度量。本质上,对于 opacity,我们设置的是背景在多大程度上可以透过指定的元素看到。

opacity 属性语法如下:

1
E { opacity: number; }

number 是一个介于 0~1 之间的小数,其中 0 表示完全透明,1 表示完全不透明。

这个属性有一点非常特殊:opacity 属性的值会被它的所有子元素继承,并且子元素所继承的 opacity 属性值的设置不能够被其他任何属性覆盖,另外子元素的 opacity 属性值只能向下覆写而不能向上覆写。也就是,我们永远不可能让子元素比它的父元素更加不透明。

Alpha通道

opacity 属性相似,Alpha 通道(简称 Alpha)是对一种颜色透明度的度量。所以,尽管使用 Alpha 的颜色值可以像其他任何颜色值一样被子元素所继承,但元素的整体不透明度并不受影响。

CSS3 引入 Alpha 作为 RGBA 颜色模型中的一个值。RGBA 中的 RGB 即是 CSS2 中的 RGB 模型,A 就是 CSS3 新引入的 Alpha。其语法如下:

1
E { color: rgba(red, green, blue, alpha); }

alpha 参数的值和 opacity 的参数值语法是一样的,是一个 0~1 之间的小数。

rgbaopacity 的区别在与,前者是一个颜色值,而后者是控制元素的透明度的;另外,前者只能精确地应用到它指定的元素上,而后者所应用的元素的所有子元素都会继承其特性。

RGBA优雅降级

不支持 RGBA 的浏览器会忽略其所声明的颜色值。为了优雅降级,我们应该制定两次颜色:

1
2
3
4
div {
color: #F000;
color: rgba(255, 0, 0, 0.75);
}

但是这样做,一定要注意,确保优雅降级后不会影响到最终的设计效果。

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%)。可以将这种颜色想象成在颜色重混合了黑色和白色。

因此,为了选择一个完全饱和、具有标准亮度的黄色,可使用如下代码:

1
color: hsl(60, 100%, 50%);

HSL 就好像是所有可能的 RGB 颜色被映射到三维之中。所有可能的颜色被安排在一个带有中心轴的圆柱体中,围绕该中心轴的角度就是色度(H),与该中心轴的距离就是饱和度(S),而沿着轴线距离就是明度(L)。

色度代表主要颜色,从红色开始和结束(0或者360度),并包括了这中间所有的主要颜色。色度就是指向某个特定颜色的圆周的角度。

饱和度就是该颜色的最强度或者力度:0%就是没有强度,会让颜色变得稍微有些灰色,而 100% 就是全部强度,是该颜色的最强版。

明度就是颜色明暗程度,50%是真实色度,0%是黑色,而 100%是白色。

HSL的语法如下:

1
E { color: hsl(hue, saturation, lightness); }

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 类似:

1
E { color: hsl(hue, saturation, lightness, alpha); }

颜色变量currentColor

CSS3 新引入了一个颜色值关键字 currentColor。这个关键字的作用更像是一个变量,也就是说它的值是继承的。它可以应用在文档树中的不同位置。一个元素的 currentColor 值是它自己的 color 属性值,并且像 color 一样,currentColor 可以被继承。

下面以实例说明:

1
2
3
4
div {
color: yellow;
border: 1px solid currentColor;
}

上述代码展示了 currentColor 的用法,它就像一个变量一样,保存着继承而来的 color 值,使用这个属性的好处是如果需要修改属性,不用再对每个子元素就行修改了,可以直接修改父元素的 color 值,前提是子元素的颜色设置都是通过 currentColor 实现的。

匹配操作系统外观

CSS3 中有一个属性 appearance,用于设置元素外观按照本地默认样式显示。

1
E { appearance: keyword; }

其中,关键字值 keyword 的值来自于用户界面元素的一长串列表。在此不赘述。