在网页排版中，我们常常希望某个区域的背景图片呈现出半透明的效果，从而让整体视觉更有层次感，但与此同时，该区域中的标题、段落或按钮等文字内容必须保持完全不透明，以确保可读性。如果直接对容器元素设置opacity属性，整个元素包括其子元素都会跟着变透明，这显然不符合需求。因此，实现背景图像透明但内容不透明，关键在于将背景与前景内容在渲染层面分离。
为什么不能直接用opacity
opacity是CSS中用来设置元素整体不透明度的属性，取值范围从0到1。当给一个div设置opacity:0.5时，浏览器会将该元素作为一个整体合成层，把它的所有视觉效果（包括背景、边框、文字、子元素）都乘以这个系数。也就是说，里面的文字也会变成半透明，叠在页面底色上显得发灰，阅读体验很差。
从渲染原理上看，opacity会触发元素创建独立的堆叠上下文（stacking context），并改变其在合成阶段的 alpha 通道值。这种处理是作用于整个元素树的，无法单独排除某一部分。因此，对于背景图透明而文字清晰的需求，必须绕开对容器直接使用opacity，转而采用只针对背景图像本身进行控制的技术。
方法一：使用伪元素承载背景图
最常见的做法是利用::before或::after伪元素来专门放置背景图片，然后只对伪元素设置opacity，而原本的容器和内容保持正常。这种方式的优势在于HTML结构不需要增加额外的空标签，语义干净，且兼容性非常好，支持到IE8以上的所有现代浏览器。
具体实现时，需要将容器设为position:relative，伪元素设为position:absolute并铺满容器，同时把z-index设为负值或者让内容自然覆盖在上方。下面是一段完整的示例代码：
/* 容器相对定位，作为伪元素的包含块 */
.card {
position: relative;
width: 400px;
height: 300px;
padding: 20px;
color: #333; /* 文字颜色正常 */
}
/* 伪元素承载背景图，单独透明 */
.card::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('https://ipipp.com/bg.jpg') no-repeat center / cover;
opacity: 0.3; /* 仅背景图透明 */
z-index: -1; /* 置于内容下方 */
}
这种方案的缺点是，如果容器本身有背景色或其他装饰，需要仔细管理z-index避免遮挡。另外，伪元素的内容为空，无法被屏幕阅读器识别，正好符合背景图只是装饰的语义。对于大多数卡片式布局，这是一种首选方案。
方法二：使用rgba或渐变叠加背景
如果不希望引入伪元素，也可以利用CSS的线性渐变（linear-gradient）配合rgba颜色，在背景图上叠加一层半透明纯色，从而在视觉上降低背景图的对比度。本质上，这不是让图片像素透明，而是通过混合色块改变观感，但效果上能满足很多设计需求。
示例代码中，我们在background属性里先写半透明渐变，再写背景图，并用background-blend-mode控制混合模式。这样无需额外标签，且对内容无任何影响：
/* 使用rgba渐变叠加背景图 */
.banner {
width: 100%;
height: 200px;
background-image:
linear-gradient(rgba(255,255,255,0.7), rgba(255,255,255,0.7)),
url('https://ipipp.com/banner.png');
background-size: cover;
background-position: center;
/* 可选：混合模式让叠加更自然 */
background-blend-mode: overlay;
}
这种写法的优点是非常直观，所有背景相关设定集中在一个属性里，维护方便。局限在于它只能做均匀透明的遮罩，不能做出局部渐隐等复杂效果。如果需要更精细的控制，还是得回到伪元素或SVG方案。
方法三：借助background-blend-mode直接混合
background-blend-mode是现代CSS提供的背景混合模式属性，它可以让元素的多个背景层（颜色、图片、渐变）之间按照类似Photoshop的混合算法进行合成。通过设置一个半透明的背景色，再和背景图混合，也能实现视觉上的透明感。
下面的例子给容器设了背景色为白色半透明，并声明blend-mode为multiply，背景图会与该色层相乘，从而变淡：
/* 用混合模式调暗背景图 */
.panel {
background-color: rgba(255, 255, 255, 0.6);
background-image: url('https://ipipp.com/pattern.jpg');
background-blend-mode: multiply;
padding: 30px;
color: #000;
}
该方式代码量极少，且不需要伪元素。但要注意，background-blend-mode在旧版浏览器（如IE）中完全不支持，如果项目需要兼容老环境，应当提供降级方案，比如默认先给一个不透明纯色背景，再用@media或Modernizr做增强。
方法对比与选型建议
为了更清晰地了解上述三种方式的差异，我们可以从兼容性、结构侵入性和灵活性三个维度比较：
| 方案 | 兼容性 | HTML结构 | 灵活度 |
|---|---|---|---|
| 伪元素opacity | IE8+ | 无侵入 | 高，可任意调透明 |
| rgba渐变叠加 | IE10+ | 无侵入 | 中，仅均匀遮罩 |
| blend-mode混合 | 现代浏览器 | 无侵入 | 高，但旧版不支持 |
在实际开发中，如果目标用户包含大量旧版客户端，伪元素法最稳妥；如果是内部系统或移动端H5，可以大胆使用blend-mode获得更好视觉效果。无论选哪种，核心原则都是把背景和文字放在不同的渲染层上，避免opacity的全局副作用。
小结
实现CSS背景图像透明而不影响文字，本质是对图层分离的理解。通过伪元素、颜色叠加或混合模式，我们都能达成目的。建议从项目兼容性要求出发，优先采用伪元素方案，并在代码注释中写明透明值对应的设计意图，方便后续维护。