MDN wants to talk to developers like you: https://qsurvey.mozilla.com/s3/8d22564490d8

这篇翻译不完整。请帮忙从英语翻译这篇文章

概述

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 初始定义

浏览器兼容性

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属性。

阅读更多

文档标签和贡献者

 此页面的贡献者: LuSitong, Sebastianz, zjsonic, SphinxKnight, FredWe
 最后编辑者: LuSitong,