对css opacity属性的验证

对css opacity属性的验证

对于一个opacity < 1的元素，它具有这样的特性：

1.其具有一个独立的层叠上下文

2.其内部元素无法脱离这个上下文（始终保持opacity的样式）

3.其外部元素无法进入这个上下文（无法具有opacity的样式）

源于：http://www.w3.org/html/ig/zh/wiki/Css3-color#.E9.80.8F.E6.98.8E.E5.BA.A6.EF.BC.9A.E2.80.98opacity.E2.80.99.E5.B1.9E.E6.80.A7

验证用例：

效果图：

<style>

div {

height: 170px; background-color: red; margin-bottom: 10px;

font-size: 20px; color: white; width: 500px;

}

h1 {

color: black; font-size: 20px;

}

.div1 {

opacity: 0.5; position: relative; z-index: 2;

}

.bg-red {

background-color: red;

}

.div2 {

opacity: 0.3; position: relative;

}

.div2 > .div2H1-1 {

position: absolute; background-color: red; top: -85px;

}

.h1-2 {

position: absolute; top: 290px;

}

</style>

<div class="div1">

<p>div1</p>

opacity: 0.5; position: relative; z-index: 2;

<h1 class="bg-red">h1 in div1 background-color: red</h1>

</div>

<div class="div2">

<p>div2</p>

opacity: 0.3; position: relative;

<h1 class="div2H1-1">h1 in div2 position: absolute; background-color: red; top: -85px;</h1>

</div>

<h1 class="h1-2">h1 in body position: absolute; top: 290px;</h1>

结论：

1.当试图将div2中的h1放入div1中时，可以验证其在脱离文档流的前提下，始终保持着div2中opacity的样式

2.当试图将body中的h1放入div2中时，可以验证body中的h1是不具备div2中opacity的样式