CSS中图片不透明度的使用向导

上面的三张图片都使用了同一张源图片。它们唯一的区别就是“不透明度等级”。

CSS中不透明度的一种常见用法是,当鼠标在菜单项上悬浮和离开时,改变菜单项的不透明度,就像下面这样(在下面的图片上移动你的鼠标来看看这种效果)

在网页上,图片的不透明度被用于很多地方。这个教程会向你描述怎样改变一张图片的不透明度等级。

不透明度等级

作为例子,这里有九个等级的不透明度例子,供你在需要的地方参考和选择。第一张的不透明度等级是10(0.1),第二张是20(0.2),它们以10为单位增加。最后一张图片的不透明度等级为90(0.9)。

就像你看到的一样,不透明度等级越高,你就可以越清楚地看到这张图片。当不透明度等级为100时,它就和原始的图片一样,没有不透明度的效果。


怎样改变一张单张图片的不透明度等级

首先我们从一张图片开始,我们就使用上面那张图片,然后正常的显示它。

没有不透明度

上面这张图片没有添加不透明度,它就使用了一个普通的 image 标签。

<img src="image.png" />

不透明度有不同等级,它由一个数字的值表示。不同的浏览器有不同的方式来处理这个值,但是从简单的角度,我们用百分比来进行说明。下面的这张图片和上面那张是同一张图片,但是有 30% 的不透明度...

Opacity = 30 (0.3)

上面的这张图片附加了数值为30的不透明度,为了添加这个不透明度,我们得给图片添加一个 “class”(“类”),像下面这样...

<img src="image.png" class="opacity30" />

为此我们还需要把这个class添加到我们的CSS文件中。它应该是这样的...

.opacity30 {
filter:alpha(opacity=30);
-moz-opacity:0.3;
-khtml-opacity: 0.3;
opacity: 0.3;
}