这篇翻译不完整。请帮忙从英语翻译这篇文章。
概述
opacity属性指定了一个元素的透明度。换言之,opacity属性指定了一个元素后面的背景的被覆盖程度。
当opacity属性的值应用于某个元素上时,是把这个元素(包括它的内容)当成一个整体看待,即使这个值没有被子元素继承。因此,一个元素和它包含的子元素都会具有和元素背景相同的透明度,哪怕这个元素和它的子元素有不同的opacity属性值。
使用opacity属性,当属性值不为1时,会把元素放置在一个新的堆栈上下文中。
初始值 | 1.0 |
---|---|
适用元素 | all elements |
是否是继承属性 | 否 |
适用媒体 | visual |
计算值 | the specified value, clipped in the range [0,1] |
是否适用于 CSS 动画 | yes, as a 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.0filter: alpha(opacity=xx) (both are synonymous) |
|||||
4.0filter: 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.0filter: alpha(opacity=xx) (both are synonymous) |
|||||
4.0filter: 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属性。