不透明度 | opacity

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

/* Fully opaque */
opacity: 1;
opacity: 1.0;

/* Translucent */
opacity: 0.6;

/* Fully transparent */
opacity: 0;
opacity: 0.0;

/* Global values */
opacity: inherit;
opacity: initial;
opacity: unset;

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

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

如果您不想将不透明度应用于子元素，请改用background属性。例如：

background: rgba(0, 0, 0, 0.4);

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

语法

值

<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">

规范

Specification	Status	Comment
CSS TransitionsThe definition of 'opacity' in that specification.	Working Draft	Defines opacity as animatable.
CSS Color Module Level 3The definition of 'opacity' in that specification.	Recommendation	Initial definition

浏览器兼容性

Feature	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Basic support	1.0	(Yes)	1.0 (1.7 or earlier)1	9.02 8.0 4.0	9.0	1.2 (125)3

Feature	Android	Edge	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic support	1.0	(Yes)	1.0 (1.7)1	9.02 8.0 4.0	9.0	3.2

本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com

最后更新于：2017-12-18