实现div层背景半透明而内容不透明的效果的注意点

今天在写div层背景半透明而内容不透明的效果的时候发现了要注意的地方,DOM结构大概是这样的
<pre><div class="contain">
<div class="test"></div>
</div>
</pre>

希望的效果是外面的div为黑色半透明,而里面的div不受影响,但是当我设置了以下样式时,test里面的内容还是半透明的。
<pre>
.contain {
background:#000;
opacity:0.5;
}
.test{
opacity:1;
}
</pre>

这时,改变一下设置的方法就可以达到想要的效果:
<pre>
.contain {
background: rgba(0,0,0,0.5);
}
</pre>
这样就不会影响到div里面的内容了。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,796评论 1 92
  • //------------------------- 第一章 认识JQuery ----------------...
    米塔塔阅读 747评论 0 9
  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    前端进阶之旅阅读 16,599评论 32 459
  • 这个问题很囧,在外面定义了一个变量 xxx ,然后在python的一个函数里面引用这个变量,并改变它的值,结果报错...
    Vincent_He阅读 444评论 0 2
  • 昨天晚上,拿起手机,本来正准备听一节课。结果刚一解锁,就收到一个发小发过来的QQ消息,问我在不在,说有事要跟我说。...
    迎春加油站阅读 273评论 1 1