对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

验证用例：

效果图：

div1

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

h1 in div1 background-color: red

div2

opacity: 0.3; position: relative;

h1 in div2 position: absolute; background-color: red; top: -85px;

h1 in body position: absolute; top: 290px;

结论：

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

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