CSS3也能设置div的透明度（opacity语法规则及实例）

　　CSS3新增了众多新属性，其中一个就是设置指定元素（如 div）的透明度，跟图片处理软件设置图片或颜色层的透明度一样，可以设置透明值。该属性使网页设置透明效果变得相当方便容易，以前要使背景全透明要保存为 gif 或 png 格式的图片，有些浏览器又不支持 png 格式的透明，所以处理起来比较麻烦，新增设置元素透明度的属性后，这些设置将变得简单。

　　用于设置透明度的属性为 opacity，它只有一个参数，也就是用小数来表示透明度，具体语法规则如下。

　　一、CSS3 设置透明度opacity语法规则

　　opacity：<number>

　　说明：

　　<number>：为 [0.0-1.0] 之间的浮点数，不设置透明度填0，设置全透明填1；如果所设置的值不在此范围，将自动计算并截取到与之最相近的值。

　　二、CSS设置div的透明度实例

　　html代码：

　　<div class="div">
　　　　<div class="div1">背景为红色的不透明度为80%的效果</div>
　　　　<div class="div2">背景为绿色的不透明度为50%的效果</div>
　　　　<div class="div3">背景为黄色的不透明度为20%的效果</div>
　　</div>

　　CSS样式：

　　<style type="text/css">
　　.div{background:#1a1a1a; width:320px; padding:10px;}

　　.div div{width:300px;height:200px; margin-top:10px; padding:10px;}
　　.div1{background:#ff0000;filter:alpha(opacity=80);opacity:.8;}
　　.div2{background:#05a510;filter:alpha(opacity=50);opacity:.5;}
　　.div3{background:#ffff00;filter:alpha(opacity=20);opacity:.2; margin-bottom:10px;}
　　</style>

　　从CSS样式可以看，设置 div 的透明，除设置 opacity 属性外，还需设置 filter 属性，否则透明无效。

　　效果图：

　　透明的效果与背景色有十分大的关系，图中用灰黑色作背景，透明部分被灰黑色填充；如果用蓝色作背景，透明部分被蓝色填充。