在HTML中设置CSS 图像透明度之创建透明图像
定义透明效果的 CSS3 属性是 opacity，CSS opacity 属性是 W3C CSS 推荐标准的一部分。
工具/原料
HTML页面
css3
方法/步骤
常规图像
带有透明度的相同图像
img{
opacity:0.4;
filter:alpha(opacity=40); /* 针对 IE8 以及更早的版本 */
}
<!DOCTYPE html>
<html>
<head>
<style>
body{
width:1020px;
margin:0 auto;
text-align:center;
}
img{
width:480px;
}
.img01,.img02{
float:left;
}
.img01{
margin-right:10px;
}
.img02 img
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
</style>
</head>
<body>
<div class="img01">
<h1>图像不透明</h1>
<img src="http://www.ziyanfoods.com/repository/image/_Lo9H16eSD61f-xNSq7gTg.jpg" alt="Peach Blossom" />
</div>
<div class="img02">
<h1>图像不透明</h1>
<img src="http://www.ziyanfoods.com/repository/image/_Lo9H16eSD61f-xNSq7gTg.jpg" alt="Peach Blossom" />
</div>
</body>
</html>
注意事项
IE9, Firefox, Chrome, Opera 和 Safari 使用属性 opacity 来设定透明度。opacity 属性能够设置的值从 0.0 到 1.0。值越小，越透明。
IE8 以及更早的版本使用滤镜 filter:alpha(opacity=x)。x 能够取的值从 0 到 100。值越小，越透明。