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其它相关文章!