css3是CSS（层叠样式表）技术的升级版本，CSS3原理同CSS，是在网页中自定义样式表的选择符，然后在网页中大量引用这些选择符。

css3中设置背景透明文字不透明的方法：

背景图 + 定位 + 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>
    <div>背景图半透明，文字不透明<br />方法：定位+ background:rgba(255,255,255,0.3)</div>
</div>

rgba是css3中新增的，rgba色彩模式与RGB相同，只是在RGB模式上新增了Alpha透明度。

RGBA

说明：

RGBA(R,G,B,A)

取值：

• R：红色值。正整数 | 百分数

• G：绿色值。正整数 | 百分数

• B：蓝色值。正整数 | 百分数

• A：Alpha透明度,取值0~1之间。

RGBA记法

此色彩模式与RGB相同，只是在RGB模式上新增了Alpha透明度。

IE6.0-8.0不支持使用 rgba 模式实现透明度，可使用 IE 滤镜处理

兼容性：

浅绿 = 支持

红色 = 不支持

粉色 = 部分支持

本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！

链接: https://fly63.com/article/detial/9178