CSS opacity属性让网页设计师能够定义特定页面元素的混合方式，为重要的页面部分增添风格与强调效果。
本质上，该属性允许你调整元素的不透明度，改变看似穿过段落、图像或其他页面元素的漫射虚拟光的量。在本篇Web Design Tips中，我将简要讨论该属性的浏览器兼容性，然后展示如何使用CSS opacity属性来强调产品描述。
浏览器不兼容
World Wide Web Consortium（W3C）制定了如CSS opacity等网页编码标准，但由于各种原因，并非所有浏览器都支持W3C定义的每个属性。例如，Internet Explorer（IE）的任何版本都无法正确渲染opacity属性（包括新发布的IE8），而Opera在9.0版本之前也存在与该属性相关的问题。
但别担心，我们将使用几个简短的变通方法，使我们的效果在所有主流浏览器中都能正常工作。这些变通方法只需添加几行代码，但非常易于管理。
CSS3 代码
在CSS中，opacity属性至少需要三个信息要素。首先，我们必须标识某个页面元素或标签（<p>、<div>或<div id="some-css-id">）。在你的样式表中，这一部分（选择器）后面跟着一组大括号。
#some-css-id{}
接下来，我们只需在样式表中输入“opacity:”即可指定opacity属性。
#some-css-id{ opacity:}
最后，我们需要添加一个 alpha 值，它描述了我们元素的透明度或不透明度。alpha 值的范围从 0.0（完全透明）到 1.0（完全不透明）。因此，alpha 值为 .5 正好处于范围的中间。现在，我们样式表中的代码应如下所示：
#some-css-id { opacity: .5;}
Filter Alpha 和 -moz-opacity 解决方案
正如我上面提到的，并非所有浏览器都能识别这个简洁优雅的属性，因此我们需要添加一个或两个额外属性，以确保最流行的网页浏览器能够理解如何处理我们元素的不透明度设置。其中之一是用于Internet Explorer的filter: alpha属性。要在IE中实现不透明度，我们必须添加这个额外属性。与CSS3 opacity属性类似，我们需要包含一个范围。对于filter:alpha，该范围从0（完全透明）到100（完全不透明）。因此，对于半透明效果，我们样式表中的代码现在将如下所示：
#some-css-id { opacity: .5; filter: alpha(opacity=50);}
下一个变通方案是-moz-opacity属性，自2004年最后使用它的浏览器更新以包含W3C标准以来，它已成为可选属性，但为了全面起见，我在这里提及它。该属性的工作方式与opacity属性完全相同，并且兼容早期版本的Safari浏览器（1.2版之前）和Firefox浏览器（0.9版之前）。最初开发-moz-opacity属性的Mozilla团队已正式要求设计师和开发人员停止使用它，但仍有人在使用。
#some-css-id { opacity: .5; filter: alpha(opacity=50); -moz-opacity: .5;}
使用 不透明度 属性来强调产品描述
在一般的页面布局、作为一些巧妙的导航的一部分或用于混合背景时，有数十种方式使用此属性。出于我们的目的，我们将在电子商务页面的产品描述部分添加一个漂亮的背景强调效果。
设置基本代码
让我们从一些基本CSS开始，创建一个ID选择器（#wrapper），我们将它与<div>标签结合使用，以涵盖我们的产品图片、产品标题和产品描述。以下是CSS代码：
#wrapper {margin: 0px auto; width: 950px;}
现在来看 HTML：
<div id="wrapper"><!--This is the #wrapper--> <div id="image"><!--This is a div for our product image--> <a href="wooden-fruit-sp1.png" title="wooden spoon"> <img src="wooden-fruit-sp2.png" alt="wooden fruit spoon" /></a> </div><!--This ends our product image div--><!--This div holds the product title and description--> <div id="product"><h1>Wooden Fruit Spoon</h1> <p>Magnus es, domine, et laudabilis valde: magna virtus tua, et sapientiae tuae non est numerus. et laudare te vult homo, aliqua portio creaturae tuae, et homo circumferens mortalitem suam, circumferens testimonium peccati sui et testimonium, quia superbis resistis: et tamen laudare te vult homo, aliqua portio creaturae tuae.tu excitas, ut laudare te delectet, quia fecisti nos ad te et inquietum est cor nostrum. </p> <img src="add.png" /> </div> </div>
我们可以简单地将 不透明度 属性添加到 #wrapper 选择器中，但这会使除背景之外的其他内容也变为半透明，产品图片和文字也会随之改变。因此，我们将创建第二个 ID 选择器，并在 HTML 中命名一个第二个 <div>。请查看更新后的 CSS：
#wrapper {margin: 0px auto; width: 950px;} #wrapper-sub { margin: 0px auto; width: 1000px; height: 350px; background-image: url(wooden-fruit-sp3.png); border: 1px solid #000000;}
现在，我创建了选择器 #wrapper-sub。在该选择器中，我将宽度设置为大于我们的 #wrapper 选择器，以便在产品信息周围留出一些空白空间。我添加了 高度 属性，因为我将在 HTML 中将 <div> 元素留空，并且我还添加了背景图像和边框。
我还在 HTML 中添加了一个新的 <div>。你会在代码的最顶部看到它：
<div id="wrapper-sub"></div> <!--HERE IS THE NEW CODE--> <div id="wrapper"><!--This is the #wrapper--> <div id="image"><!--This is a div for our product image--> <a href="wooden-fruit-sp1.png" title="wooden spoon"> <img src="wooden-fruit-sp2.png" alt="wooden fruit spoon" /></a> </div><!--This ends our product image div--><!--This div holds the product title and description--> <div id="product"><h1>Wooden Fruit Spoon</h1> <p>Magnus es, domine, et laudabilis valde: magna virtus tua, et sapientiae tuae non est numerus. et laudare te vult homo, aliqua portio creaturae tuae, et homo circumferens mortalitem suam, circumferens testimonium peccati sui et testimonium, quia superbis resistis: et tamen laudare te vult homo, aliqua portio creaturae tuae.tu excitas, ut laudare te delectet, quia fecisti nos ad te et inquietum est cor nostrum. </p> <img src="add.png" /> </div> </div>
CSS 不透明度 属性
现在，我在样式表中添加了 不透明度 属性和 filter:alpha 变通方法：
#wrapper {margin: 0px auto; width: 950px;} #wrapper-sub { margin: 0px auto; width: 1000px; height: 350px; background-image: url(wooden-fruit-sp3.png); border: 1px solid #000000; opacity: .5; filter: alpha(opacity=50);}
定位元素
如果我就此停止，我的页面上会有两个 <div> 元素垂直堆叠，这并不是我想要的效果。我需要添加一些 CSS 定位和分层来实现我期望的效果：
#wrapper {position: relative; z-index: 2; margin: 0px auto; width: 950px;} #wrapper-sub {position: fixed; z-index: 1; margin: 0px auto; width: 1000px; height: 350px; background-image: url(wooden-fruit-sp3.png); border: 1px solid #000000; opacity: .5; filter: alpha(opacity=50);}
插入到两个选择器中的 CSS 位置 属性将使两个 <div> 元素重叠，而 z-index 属性告诉浏览器将哪个 <div> 放在顶层。添加这些属性后，我们在产品页面上实现了出色的 CSS 不透明度效果。
资源
- W3C CSS Color Module Level 3，关于不透明度的工作草案，2008年7月21日
- Mozilla 开发者中心：不透明度