CSS3 入门：颜色和不透明度

引言

层叠样式表 (CSS) 最初于 1996 年作为 W3C 推荐发布，至今仍是区分内容渲染与其标记的最佳方式。近 15 年后，CSS 级别 3 (CSS3) 为 Web 开发人员提供了新的设计功能。我们将探讨其中一些最有趣和最受欢迎的功能。

如果您还不熟悉 CSS，一个不错的起点是 Nongjian Zhou 的文章 CSS 入门。它提供了关于 CSS 语法、常用选择器和将 CSS 添加到 HTML 文件中的技术的便捷入门指南。

需要注意的是，CSS3 仍处于工作草案状态，尚未成为最终的、稳定的 W3C 推荐。CSS3 的一个新方面是将提议的新功能分解为 40 多个模块。有些模块极具实验性，而另一些模块则相当稳定，并正在新浏览器版本中实现。CSS3 颜色模块已成为一项实际的 W3C 推荐。

为了实现“标准兼容”，大多数当前浏览器现在都支持 CSS3 工作草案中描述的许多功能，但明智的做法是记住这些功能及其实现可能会发生变化。在使用这些功能进行生产代码之前，请务必反复测试。

在本文中，我们将重点介绍 CSS3 颜色模块，因为它比其他提案和实验性功能更加稳固。事实上，截至 2011 年 6 月，它已成为官方的 W3C 推荐。新的 CSS3 颜色功能除了传统的十六进制和 RGB 值外，还包括 HSL 颜色规范，以及直接指定不透明度和 Alpha 通道的能力。

HSL 颜色

传统上，在 HTML 标记和 CSS 中有多种指定颜色的方法。这些方法包括：

• 颜色关键字（水绿色、黑色、蓝色、紫红色、灰色、绿色、亮绿色、栗色、海军蓝、橄榄色、橙色、紫色、红色、银色、青色、白色和黄色）
• 十六进制值
• RGB 值

以下是一些快速示例：

.keyword { color: white; }
.shorthex { color: #FFF; }
.longhex { color: #FFFFFF; }
.rgb1 { color: rgb(255, 255, 255); }
.rgb2 { color: rgb(100%, 100%, 100%); }

CSS3 增加了通过色相、饱和度和亮度 (HSL) 值以指定颜色的能力。

.example { color: hsl([hue], [saturation], [light]); }
.implemented { color: hsl(240, 50%, 80%); }

色相以色轮上的度数表示颜色。W3C 文档提供了一些有用的 色相和饱和度值表供您参考，并且有许多在线工具可以生成色相值。

饱和度以百分比表示颜色的量，其中 0% 是完全去饱和（灰度），100% 是完全饱和（所选颜色以其最鲜艳的状态显示）。

亮度以百分比表示颜色的亮度，其中 0% 是没有亮度（黑色），100% 是所有亮度（白色）。

一个用于尝试 HSL 颜色的出色工具是 HSL 颜色选择器，它允许您选择一种颜色，然后复制粘贴十六进制、HSL/HSLa 或 RGB/RGBa 表示形式。（感谢会员 HasmoreJohn 的建议和链接。）

这里我们有几个例子，展示了具有不同饱和度水平的蓝色（色相 = 240）文本。

#left { color: hsl(240, 0%, 50%); }
#center { color: hsl(240, 50%, 50%); }
#right { color: hsl(240, 100%, 50%); }

这相当于以下文本颜色渲染：

同样，我们可以调整亮度值。

#left { color: hsl(240, 100%, 0%); }
#center { color: hsl(240, 100%, 50%); }
#right { color: hsl(240, 100%, 100%); }

结果如下所示：

因此，这为您提供了五种在 CSS 中指定元素颜色的方法。我在这里仅演示了文本着色，但当然，这同样适用于可以接受颜色样式的所有其他元素，例如背景和边框。

至于调色板选择和品味……我将其留给读者作为练习。

不透明度和渐变

CSS3 的另一个与颜色相关的特性是支持 Alpha 通道和不透明度。基本上，这使您能够控制任何元素（从文本到背景再到整个 div）的透明度，从完全不透明到完全透明，以及介于两者之间的任何状态。

为了演示，让我们从一个包含一些文本的简单 div 开始。

<div id="container1">
    <span id="left">I</span>
    <span id="center">&hearts;</span>
    <span id="right">Opacity</span>
</div>

我们将从一个没有不透明度设置的示例开始，然后添加一个使用为整个 div 设置不透明度的变体。（请注意，为清晰起见，我省略了一些样式，例如宽度、对齐方式等。）

#noopacity { background: silver; }
#basicopacity { background: silver; 
                opacity: 0.7;
                -moz-opacity: 0.7;
                -webkit-opacity: 0.7;
                -khtml-opacity: 0.7; }

正如您在此处看到的，我们使用了不透明度设置。不透明度值范围从 0.0（完全透明）到 1.0（完全不透明）。在这种情况下，我们将不透明度应用于整个 div，包括文本。我们还包含了 -moz、-webkit 和 -khtml 前缀设置，以兼容 FireFox、Safari/Chrome 和旧版 Safari 浏览器实现。结果如下所示：

这其实并不是 CSS3 的特性。但是，CSS3 允许在 RGBa 或 HSLa 颜色设置中将不透明度指定为 Alpha 通道。在这种情况下，您可以使用 rgba 代替 rgb，或 hsla 代替 hsl 来进行设置，并为 Alpha 通道（不透明度）值添加第四个参数。例如，让我们只将不透明度应用于 div 的背景：

#rgbaopacity { background:rgba(192, 192, 192, 0.7); }

结果很简单。请注意，在这种情况下，文本保持完全不透明，而背景变得有些透明。

渐变是您也可以开始使用的另一个 CSS3 功能，尽管不同浏览器中的实现方式不同，您需要应用特定于浏览器的前缀。然而，各种渐变实现接受使用所有 CSS3 技术从保留颜色关键字到 RGBa 和 HSLa 的颜色规范。

#lineargradient {
    background: -moz-linear-gradient(top, silver 0%, white 100%);
    background: -webkit-gradient(
        linear, left top, left bottom, from(silver), to(white));}

在这种情况下，我们只是从银色过渡到白色。但是，完全可以利用 Alpha 通道在渐变中实现透明度。

#container5 {
    background: -moz-linear-gradient(
        top, rgba(192, 192, 192, 0.8), rgba(255, 255, 255, 0.0));
    background: -webkit-gradient(linear, left top, left bottom, from(
        rgba(192, 192, 192, 0.8)), to(rgba(255, 255, 255, 0.0)));}

在这里，您可以看到标准的线性渐变和一个从半透明银色过渡到完全透明白色的版本。

CSS 代码会变得更加复杂，但在指定垂直、水平甚至径向渐变、使用多种颜色和透明度级别方面，它也提供了极大的灵活性。

有关渐变语法的更多详细信息以及您可以使用的其他功能，请参阅 Mozilla 开发者文档中的 使用渐变 和 Webkit.org 文档中的 CSS3 渐变。