如何容器透明，内容不透明(margin负值可以是文档内容层级提高)

.outer{width:200px;height:200px;background:#000;filter:alpha(opacity=20);opacity:.2;}
.inner{width:200px;height:200px;margin-top:-200px;}

<div class="outer"><!--我是透明的容器--></div>
<div class="inner">我是不透明的内容</div>

原理是容器层与内容层并级，容器层设置透明度，内容层通过负margin或者position绝对定位等方式覆盖到容器层上

今天在看飘零雾雨的博客的时候看到使容器透明，内容不透明的解决方案，当我看到代码和实现后的效果的时候

我是震惊的，因为这样的效果，给我的感觉就是意味着margin负值的使用，可以提高内容的层级，或者说使其脱离了文档流；

然而事实情况也确实如此，至少在效果上面是如此的。

可以看看拓展阅读，强大的margin负值：http://www.cnblogs.com/jscode/archive/2012/08/28/2660078.html

 

 

 

转载于:https://www.cnblogs.com/zhangxg/p/4718139.html