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

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;

}