层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
CSS实现div层背景透明而文字不透明的方法:
背景图 + 定位 + background:rgba(255,255,255,0.3)
.demo2-bg{ background: url(http://csssecrets.io/images/tiger.jpg) 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之间。