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

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

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

方法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浏览器在定义容器透明的同时,让子节点相对定位,也可达到效果

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


上一篇:
下一篇:
关于尚硅谷
教育理念
名师团队
学员心声
资源下载
视频下载
资料下载
工具下载
加入我们
招聘岗位
岗位介绍
招贤纳师
联系我们
全国统一咨询电话:010-56253825
地址:北京市昌平区宏福科技园综合楼6层(北京校区)

深圳市宝安区西部硅谷大厦B座C区一层(深圳校区)

上海市松江区谷阳北路166号大江商厦6层(上海校区)

武汉市东湖高新开发区东湖网谷(武汉校区)