前言:
部分内容来自doy的博客:《CSS3 RGBA不是简单的RGB与opacity相加》,感谢作者!
个人做积累学习用
正文:
前面我也有一篇简单整理过rgba,如果不熟悉的可以看看那个。
我们来看下面这个例子:
<div id="up-wrap">
我是上面这层的文字
</div>
<div id="down-wrap">
我是下面这层的文字
</div>
#up-wrap,#down-wrap{
width:380px;
height:80px;
padding:20px;
position:relative;
color:#fff;
z-index:3;
}
#up-wrap{
background:blue;
opacity:.7;
filter:alpha(opacity=70);
}
#down-wrap{
z-index:1;
margin-left:10px;
margin-top:-110px;
background:red;
}
我们采用opacity来进行透明处理,但是效果:
当然,这个不是我们需要的,我们设置了上面的字体颜色为#fff,我们可以用rgba来实现改进!
#up-wrap{
background:rgba(0,0,255,0.7);
}
效果图: