在使用opacity设置背景透明的时候,多数人会这样写:、
html:
<div class="box">
<p>测试啊</p>
</div>
class:
.box{
width:100px;
height:100px;
opacity: 0.5;filter:alpha(opacity = 50);
}
.box p{color:#fff;padding:10px;}
恩,很好,看起来确实可以正常工作了。但问题是,层里面的文字也继承了透明度,严重影响了可读性,这体验太差了!
有没有更好的解决方案呢?答案是肯定的,如下所示:
.box{
width:100px;
height:100px;
background-color:rgba(0,0,0,0.5);
background-color:none\0;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000);
zoom:1;
}
.box p{color:#fff;padding:10px;}