CSS中有一个属性可以控制页面元素的透明度,这个属性是“Opacity”,我们只需要对这个属性赋值就可以完成透明度的设置。属性使用也很简单,如下代码:
opacity:0.5
上面这个代码就是把当前元素的透明度设置为半透明,您可以修改冒号后面的数字,使其透明度满足您的需要。这个数字是0到1之间的数字,表示不同程度的透明度,0表示完全透明,1表示完全不透明。
opacity属性可以应用在页面元素上,包括图片,div等,下面用一个例子来说明:
<div style="background-color: black; padding:10px;"></div>
上面这个div里面,我们用“background-color: black”对div设置了背景色为黑色,这是为了能够看到效果。然后我们在上面代码的基础上添加透明度设置,代码如下:
<div style="background-color: black; padding:10px; opacity:0.5"></div>
我们增加了“opacity:0.5”,这时您会发现div原来的纯黑色已经变化了,当我们调整opacity属性的数值时,div的透明度会随着调整而调整。
额外的如果您的代码希望兼容IE8以及更早的IE浏览器的话,那么您还需要添加如下的代码:
filter:alpha(opacity=40)
但是随着浏览器的发展,现在使用IE8浏览页面的网友已经基本没有了,所以在普遍的情况下,您可以大胆地只使用“opacity”属性设置透明度。