opacity

语法：

opacity：<number>

默认值：1

适用于：所有元素

继承性：无

动画性：是

计算值：指定值

媒　体：视觉

取值：

<number>：
使用浮点数指定对象的不透明度。值被约束在0.0~1.0范围内，如果超过了这个范围，其计算结果将截取到与之最相近的值。

说明：

定义元素的不透明度。
  • 当一个元素定义了opacity属性，并且值小于1时，那么它的子元素也会同样拥有相同的透明度。
  • 当一个元素定义了opacity属性，并且值小于1时，将会创建一个新的堆叠上下文；如果其它的元素为非定位元素，那么该元素的堆叠级别将会高于其它元素。
  • 对于尚不支持opacity属性的IE浏览器可以使用IE私有的滤镜属性来实现与opacity相同的效果

    示例代码：

    div{filter:alpha(opacity=50);} /* for IE8 and earlier */
div{opacity:.5;} /* for IE9 and other browsers */

    以上2段代码的效果相同

  • 对应的脚本特性为：opacity。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
IE Edge Firefox Chrome Safari Opera iOS
Safari		 Android
Browser		 Blackberry
Browser		 Opera
Mobile		 Chrome
for
Android		 Firefox
for
Android		 IE
Mobile		 UC
Browser
for
Android		 Samsung
Internet		 QQ
Browser		 Baidu
Browser
5.5-8 12+ 2+ 4+ 3.1+ 9+ 3.2+ 2.1+ 7+ 10+ 61 56 10+ 11.4 4+ 1.2 7.12
9+
  1. IE5.5-8也可以使用滤镜来实现该效果: progid:DXImageTransform.Microsoft.Alpha()

示例：