
css实现div层背景透明而文字不透明的方法:
背景图 + 定位 + background:rgba(255,255,255,0.3)
.demo2-bg{
background: url(http://csssecrets.io/images/tiger.webp) no-repeat;
background-size: cover;
width: 500px;
height: 300px;
position: relative;
}
.demo2{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 500px;
height: 300px;
line-height: 50px;
text-align: center;
background:rgba(255,255,255,0.3);
}
<div class="demo2-bg">
<div class="demo2">背景图半透明,文字不透明<br />方法:定位+ background:rgba(255,255,255,0.3)</div>
</div>效果图:

rgba色彩模式与RGB相同,只是在RGB模式上新增了Alpha透明度。
说明:
RGBA(R,G,B,A)
取值:
R:红色值。正整数 | 百分数
G:绿色值。正整数 | 百分数
B:蓝色值。正整数 | 百分数
A:Alpha透明度,取值0~1之间。
推荐:css手册
以上就是css如何实现div层背景透明而文字不透明?的详细内容,更多请关注易知道|edz.cc其它相关文章!













