opacity会影响整个元素的透明度，包括内容；2. 要实现仅背景透明，应使用rgba或hsla颜色格式设置background-color；3. 对于背景图片，可通过伪元素结合opacity实现背景透明而文字不透明。
在使用HTML和CSS设置背景透明度时，很多人会发现直接用opacity控制背景会导致整个元素及其内容都变透明，而只想让背景单独透明时效果不生效。这是因为opacity作用于整个元素，包括文字、子元素等。要实现仅背景透明，需要用其他方法。
opacity 与 background-color 透明度的区别
opacity 是作用于整个元素的透明度属性，取值范围是 0 到 1。比如：
opacity: 0.5;这会让元素本身以及内部的文字、图片等内容都变成半透明，往往不是我们想要的效果。
而如果只想让背景色透明，应该使用支持透明通道的颜色格式，例如：
立即学习“前端免费学习笔记（深入）”；
- rgba(r, g, b, a)：前三个值表示红绿蓝，第四个是透明度
- hsla(h, s, l, a)：色相、饱和度、亮度 + 透明度
示例：
background-color: rgba(255, 0, 0, 0.3);这样只会让背景变成半透明红色，文字保持不透明。
如何正确设置背景透明而文字不透明
错误写法（整体会变透明）：
div {background-color: red;
opacity: 0.3;
}
正确写法（仅背景透明）：
div {background-color: rgba(255, 0, 0, 0.3);
opacity: 1; /* 文字和内容保持清晰 */
}
也可以使用十六进制颜色加 alpha 通道（现代浏览器支持）：
background-color: #ff00004d; /* 最后两位4d ≈ 30% 透明度 */背景图片如何设置透明
如果背景是图片，不能直接用opacity，否则内容也会受影响。推荐做法是使用伪元素：
position: relative;
}
.container::before {
content: "";
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background-image: url('bg.jpg');
opacity: 0.5;
z-index: -1;
}
这样背景图可以透明，而容器内的文字不受影响。
基本上就这些。关键是分清opacity影响整体，而rgba或伪元素才能实现局部透明。用对方法，背景透明就不难了。
