本章介绍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>
输出: