opacity
概述
opacity 属性指定了一个元素的不透明度。换言之,opacity 属性指定了一个元素后面的背景的被覆盖程度。
当 opacity 属性的值应用于某个元素上时,是把这个元素(包括它的内容)当成一个整体看待,即使这个值没有被子元素继承。因此,一个元素和它包含的子元素都会具有和元素背景相同的透明度,哪怕这个元素和它的子元素有不同的 opacity 属性值。
使用 opacity 属性,当属性值不为 1 时,会把元素放置在一个新的层叠上下文中。
语法
/* 完全不透明 */
opacity: 1;
opacity: 1.0;
/* 半透明 */
opacity: 0.6;
/* 完全透明 */
opacity: 0.0;
opacity: 0;
opacity: inherit;
属性值
正式规则
opacity =
<alpha-value>
<alpha-value> =
<number> |
<percentage>
示例
基本示例
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 | 初始定义 |
浏览器兼容性
BCD tables only load in the browser
- 历史: 在 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 属性。