opacity

概述

opacity属性指定了一个元素的透明度。换言之，opacity属性指定了一个元素后面的背景的被覆盖程度。

当opacity属性的值应用于某个元素上时，是把这个元素（包括它的内容）当成一个整体看待，即使这个值没有被子元素继承。因此，一个元素和它包含的子元素都会具有和元素背景相同的透明度，哪怕这个元素和它的子元素有不同的opacity属性值。

使用opacity属性，当属性值不为1时，会把元素放置在一个新的层叠上下文中。

初始值1.0
适用元素all elements
是否是继承属性否
适用媒体visual
计算值the specified value, clipped in the range [0,1]
Animation typea number
正规顺序the unique non-ambiguous order defined by the formal grammar

语法

/* 完全不透明 */
opacity: 1;
opacity: 1.0;

/* 半透明 */
opacity: 0.6;

/* 完全透明 */
opacity: 0.0;
opacity: 0;

opacity: inherit;

属性值

<number>
 <number> 是一个0.0到1.0范围内的数字值,这个数值既包含也代表通道的透明度，也就是alpha通道的值。任何一个溢出这个取值区间的值，尽管有效，但会被解析为在取值范围内最靠近它的值。
值 释义
0 元素完全透明 (即元素不可见).
任何一个位于0.0-1.0之间的 <number> 元素半透明 (即元素后面的背景可见).
1 元素完全不透明(即元素后面的背景不可见).

正式规则

<number>

示例

基本示例

div { background-color: yellow; }
.light {
  opacity: 0.2; /* Barely see the text over the background */
}
.medium {
  opacity: 0.5; /* See the text more clearly over the background */
}
.heavy {
  opacity: 0.9; /* See the text very clearly over the background */
}

<div class="light">You can barely see this.</div>
<div class="medium">This is easier to see.</div>
<div class="heavy">This is very easy to see.</div>

:hover时opacity的不同

img.opacity {
  opacity: 1;
  filter: alpha(opacity=100); /* IE8 and lower */
  zoom: 1; /* Triggers "hasLayout" in IE 7 and lower */
}
 
img.opacity:hover {
  opacity: 0.5;
  filter: alpha(opacity=50);
  zoom: 1;
}
<img src="//developer.mozilla.org/media/img/mdn-logo.png"
     alt="MDN logo" width="128" height="146"
     class="opacity">

规范

规范 状态 说明
CSS Transitions
opacity		 Working Draft 定义动态透明度
CSS Color Module Level 3
opacity		 Recommendation 初始定义

浏览器兼容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!
Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1.0 1.0 (1.7 or earlier) 9.0 9.0 1.2 (125)
8.0
filter: alpha(opacity=xx)
filter: "alpha(opacity=xx)"
(both are synonymous)
4.0
filter: alpha(opacity=xx)
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 1.0 1.0 (1.7) 9.0 9.0 3.2
8.0
filter: alpha(opacity=xx)
filter: "alpha(opacity=xx)"
(both are synonymous)
4.0
filter: alpha(opacity=xx)
  • 历史: 在 Mozilla 1.7 (Firefox 0.9)版本 之前，“-moz-opacity” 属性一直以一种非标准的方式在使用。在Firefox 0.9版本中 ，这种行为得到了改变，这个属性被重命名为opacity。从那以后，-moz-opacity属性仅作为opacity属性的别名而存在。
  • Gecko 1.9.1 (Firefox 3.5) 以后的版本不再支持 -moz-opacity属性 和 Javascript中的MozOpacity属性（Gecko13中删除），到目前为止，你应该使用opacity属性。
  • 在9.0版本之前，Internet Explore浏览器不支持opacity属性, 它宁愿使用私有滤镜代替。.
  • IE4 —IE9 支持下面的扩展形式： progid:DXImageTransform.Microsoft.Alpha(Opacity=xx).
  • IE8引入了与“fliter滤镜”同义的"-ms-filter" 属性。在IE10中不再支持这两个属性。
  • 和“-moz-opacity” 属性相似, "-khtml-opacity"从2004年年初 (Safari 1.2发布)，已经不再受到支持。
    Konqueror 从来不支持 -khtml-opacity 属性，从第四版开始，它一直自持opacity属性。

阅读更多

相关主题