本章介绍css透明度 opacity,通过 opacity 属性可以设置图片的透明度。背景色透明度可以使用css透明度 rgba

语法

其语法十分简单

opacity: value
value的取值为0到1,其中value值越小越透明。

例子

下面介绍一个简单的例子,了解css透明度 opacity的用法。

<!DOCTYPE html>
<html>
<head>
	<title>css透明度 opacity</title>
<style>
img.trans4 {
    opacity: 0.4;
    filter: alpha(opacity=40); /* 对于IE8及更早版本 */
}
img.trans2 {
    opacity: 0.2;
    filter: alpha(opacity=20); /* 对于IE8及更早版本 */
}
.fl{float:left;margin-left:10px;}
</style>
</head>
<body>
<div class="fl">
	<p>无透明度</p>
	<img src="/static/default/yxjc/css/rose.jpg" alt="normal rose">
</div>
<div class="fl">
	<p>透明图片0.4</p>
	<img class="trans4" src="/static/default/yxjc/css/rose.jpg" alt="css透明图片">
</div>
<div class="fl">
	<p>透明图片0.2</p>
	<img class="trans2" src="/static/default/yxjc/css/rose.jpg" alt="css透明图片">
</div>	
</body>
</html>

输出:

css透明度 opacity