Home >Web Front-end >HTML Tutorial >css设置元素透明度代码实例_html/css_WEB-ITnose
css设置元素透明度代码实例_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:30:221952browse
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/
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：css基础结构化标记表单等_html/css_WEB-ITnoseNext article：html标签之meta标签_html/css_WEB-ITnose