如何容器透明,内容不透明(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

 

 

 

posted on 2015-08-10 15:28  张小国  阅读(274)  评论(0编辑  收藏  举报

导航