opacity

版本：CSS3

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

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

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

示例

/* 完全不透明 */
opacity: 1;
opacity: 1.0;

/* 半透明 */
opacity: 0.6;

/* 完全透明 */
opacity: 0.0;
opacity: 0;

opacity: inherit;

浏览器支持

IE9以上版本的浏览器都支持opacity

语法：

opacity：<number>

取值：

• <number>：使用浮点数指定对象的不透明度。值被约束在[0.0-1.0]范围内，如果超过了这个范围，其计算结果将截取到与之最相近的值。
• 对应的脚本特性为opacity。
• 对于尚不支持opacity属性的IE浏览器可以使用IE私有的滤镜属性来实现与opacity相同的效果

div{filter:alpha(opacity=50);} /* for ie8 and earlier */
div{opacity:.5;} /* for ie9 and other browsers */
 

例子

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>you can barely see this.</div>
<div>this is easier to see.</div>
<div>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="https://www.lanmper.cn/upload/browser/compatible_chrome.gif" alt="mdn logo" width="60" height="60" class="opacity" />