Home > Web Front-end > HTML Tutorial > css设置元素透明度代码实例_html/css_WEB-ITnose

css设置元素透明度代码实例_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:30:22
Original
1945 people have browsed it

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>
Copy after login

以上代码在谷歌和火狐浏览器中能够完美执行,但是在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>
Copy after login

 

以上代码实现了我们的要求,也就是添加了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/

 

source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template