CSS3之美（九）：颜色与不透明度

发表于 | 更新于 | 分类于 |
字数统计 1,825 | 阅读时长 7

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 之间的小数。

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

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 的值来自于用户界面元素的一长串列表。在此不赘述。