Heim >Web-Frontend >HTML-Tutorial >css设置元素透明度代码实例_html/css_WEB-ITnose
css设置元素透明度代码实例_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:30:221952Durchsuche
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/
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：css基础结构化标记表单等_html/css_WEB-ITnoseNächster Artikel：html标签之meta标签_html/css_WEB-ITnose