<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>CSS之opacity</title>
</head>
<body>
<!--
opacity概述:
opacity属性指定了一个元素的透明度。换言之,opacity属性指定了一个元素后面的背景的被覆盖程度。
当opacity属性的值应用于某个元素上时,是把这个元素(包括它的内容)当成一个整体看待,即使这个值没有被子元素继承.因此,
一个元素个它包含的子元素都会具有和元素相同的透明度,即使这个元素和它的子元素具有不同的opacity属性值。
语法:
opacity: number;
其中number是一个从0.0到1.0范围内的数字值。任何一个溢出这个取值区间的值，尽管有效，但会被解析为在取值范围内最靠近它的值。
------------------------------------------------------------------------
0 - 元素完全透明,即元素不可见
------------------------------------------------------------------------
任何一个位于0.0-1.0之间的值 - 元素半透明,即元素后面的背景可见
------------------------------------------------------------------------
1 - 元素完全不透明,即元素后面的背景不可见
------------------------------------------------------------------------
注意：filter属性是IE特有的,IE8及更早版本使用filter:alpha(opacity=x);x可以取0到100之间的值。较低的值使元素更透明。
img {
opacity: 0.6;
filter:alpha(opacity=60); /* for IE8 and earlier */
}
-->
<div class="cover">
<div class="inner"></div>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
}
.cover {
width: 200px;
height: 200px;
background-color: green;
opacity: 0.8;
}
.inner {
width: 80px;
height: 80px;
background-color: white;
opacity: 0.3;
}