css设置元素透明度代码实例_html/css_WEB-ITnose
- WBOY原創
- 2016-06-24 11:30:221952瀏覽
css设置元素透明度代码实例:
本章节介绍一下如何设置一个元素的透明度，现在众多的效果都有使用，下面就介绍一下如何实现此效果。
w3c提供了一种标准的设置透明度的属性opacity，此属性值大小是介于0-1之间的，0为完全透明，1为完全不透明。
代码如下:
<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">div{ width:100px; height:100px; background:red; opacity:0.3;}</style></head><body><div></div></body></html>
以上代码在谷歌和火狐浏览器中能够完美执行，但是在IE8和IE8以下浏览器中并不成功，因为它们并不支持opacity属性。
代码修改如下:
<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">div{ width:100px; height:100px; background:red; opacity:0.3; filter:alpha(opacity=30);}</style></head><body><div></div></body></html>
以上代码实现了我们的要求，也就是添加了filter:alpha(opacity=30)，这个IE浏览器支持，需要注意的是，括号中的opacity值是0-100的，0表示完全透明，100表示完全不透明。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=12918
更多内容可以参阅:http://www.softwhy.com/divcss/
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn