前端培训之如何容器透明，内容不透明

在许多的时候我们在前端开发培训学习中都会设计到透明度的问题，当我们向父元素中添加子元素的时候，就会发现子元素继承了父元素的透明度。而在某些情况下这是我们不希望发生的。即使你重新设置子元素的透明度为不透明，它仍然会继承父元素的透明度。

要怎样解决这个问题呢？一般我们的前端培训老师会让我们使用绝对定位来使这些元素看起来像父子关系，然后再进行设置。

方法1：

.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绝对定位等方式覆盖到容器层上

 

方法2：

.outer{

width:200px;

height:200px;

background:rgba(0,0,0,.2);

background:#000\9;

filter:alpha(opacity=20)\9;

}

.outer .inner{position:relative\9;}    

<div class="outer"> 

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

</div>

高级浏览器直接使用rgba颜色值实现；IE浏览器在定义容器透明的同时，让子节点相对定位，也可达到效果

想要了解跟多关于前端培训课程内容欢迎关注尚硅谷前端培训，尚硅谷除了这些技术文章外还有免费的高质量前端培训课程视频供广大学员下载学习