不透明度 | 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);

语法

值

<number>

<number>是一个0.0到1.0范围内的数字值,这个数值既包含也代表通道的透明度，也就是alpha通道的值。任何一个溢出这个取值区间的值，尽管有效，但会被解析为在取值范围内最靠近它的值。

正式语法

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

规范

浏览器兼容性