css如何设置透明度？opacity设置整个元素的透明度，并且会被子元素继承。语法如下。
opacity: value (0-1);
IE8以及更早的版本支持替代的filter属性，属性值为0～100。例如，filter:alpha（opacity=50）。
opacity可以改变图片的透明度，利用这个特性可以完成图片的悬停效果。
【例】创建3张图片，并设置透明度为0.3，效果如图1所示。代码如下。
<style>
img{
height:200px;
opacity:0.3;
}
</style>
</head>
<body>
<div class="page">
<img src="/news/img/animal1.jpg" alt="" />
<img src="/news/img/animal2.jpg" alt="" />
<img src="/news/img/animal3.jpg" alt="" />
</div>
</body>
图1 半透明图片
鼠标指针移到图片上时，将该图片的透明度设为不透明，完成图片的选定效果，如图2所示。代码如下。
img:hover{
opacity:1;
}
图2 图片悬停
【例2】建一个div元素，class名为box，背景色为黑色。在box的内部创建一个span元素，填入文字，文字颜色为红色，效果如图3所示。HTML代码如下。
图3 黑底红字
<style>
.box{
width:300px;
height:100px;
text-align:center;
background-color:#000000;
}
.box span{
color:red;
}
</style>
<body>
<div class="box">
<span> 元素一定会从父级继承opacity属性值 </span>
</div>
</body>
给box设置CSS样式，将透明度设置为0.1，效果如图4所示。可以看到box及其子级span元素中的文字都变为半透明状态，文字继承了box框的透明度属性值。代码如下。
图4 添加透明度属性
.box{
width:300px;
height:100px;
text-align:center;
background-color:#000000;
opacity: 0.3;
}
