转载 | 如何实现模块半透明 文字内容不透明?
Posted 自转不息
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了转载 | 如何实现模块半透明 文字内容不透明?相关的知识,希望对你有一定的参考价值。
两种方法
一种是用background:rgba(0, 0, 0, 0.5),兼容性只支持IE8往上另一种方法使用透明度
要考虑IE8往下可以用这个:
<style type="text/css"> .box{ position:relative; width:200px; height:200px; border:1px solid #666; z-index:0; } .box .bg{ background:red; position:absolute; z-index:-1; opacity:0.5; filter:alpha(opacity=50); width:100%; height:100%; } </style> <div class="box"> <!-- 背景 --> <div class="bg"></div> <!-- 内容 --> <div class="text"> <p>呵呵,我不受透明度影响!</p> </div> </div>
以上是关于转载 | 如何实现模块半透明 文字内容不透明?的主要内容,如果未能解决你的问题,请参考以下文章