欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

CSS3 opacity

程序员文章站 2022-06-19 17:29:47
opacity用来设置元素的透明度。 值被约束在[0.-1.0]范围内,如果超过了这个范围,其计算结果将截取到与之最相近的值。 0表示完全透明,1表示完全不透明。 浏览器支持: (1).IE浏览器支持此属性。 (2).火狐李蓝旗支持此属性。 (3).谷歌浏览器支持此属性。 (4).opera浏览器支 ......

opacity用来设置元素的透明度。

值被约束在[0.-1.0]范围内,如果超过了这个范围,其计算结果将截取到与之最相近的值。 

0表示完全透明,1表示完全不透明。

浏览器支持:

(1).IE浏览器支持此属性。

(2).火狐李蓝旗支持此属性。

(3).谷歌浏览器支持此属性。

(4).opera浏览器支持此属性。

(5).safria浏览器支持此属性。

注意:IE6-IE8不支持此属性。

代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
.ant{
  width:200px;
  height:100px;
  background-color:#333;
  opacity:0.4;
  color:#ff0000;
}
</style>
</head>
<body>
<div class="ant">蚂蚁部落</div>
</body>
</html>

上面的代码实现了设置元素透明度的功能。

不过里面的文本也变得透明,这有时候不是我们希望看到的,具体可以参阅CSS 透明度设置一章节。