如何使用 CSS 伪元素设置背景图片透明度

在网页开发中，经常需要给某个容器设置背景图片，同时希望背景图片有一定的透明度，但是容器内部的其他内容比如文字、按钮等保持不透明，直接使用opacity属性设置整个元素的透明度会导致所有子元素都变透明，不符合需求。使用CSS伪元素可以单独为元素添加背景层，独立控制背景层的透明度，避免影响其他内容。

实现原理

CSS的::before和::after伪元素可以在选中元素的内容前后插入一个虚拟的元素，这个虚拟元素默认是行内元素，我们可以通过设置它的尺寸为铺满父容器，把背景图片设置到这个伪元素上，然后给伪元素设置透明度，父容器本身不设置背景和透明度，这样父容器内部的其他内容就不会受到透明度的影响。

基础实现步骤

• 给目标容器设置position: relative，方便伪元素定位
• 使用::before或::after伪元素，设置position: absolute让它脱离文档流
• 设置伪元素的宽高为100%，铺满整个父容器
• 给伪元素设置背景图片和相关背景属性
• 给伪元素设置opacity属性调整透明度，取值在0到1之间，0是完全透明，1是完全不透明
• 给伪元素设置z-index: -1，让伪元素位于父容器内容层的下方

基础代码示例

下面是一个给div容器设置半透明背景图，内部文字保持不透明的基础示例：

/* 父容器样式 */
.container {
    position: relative;
    width: 500px;
    height: 300px;
    /* 父容器不设置背景，避免影响子元素 */
}

/* 伪元素作为背景层 */
.container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 设置背景图片 */
    background-image: url("https://ipipp.com/bg.jpg");
    background-size: cover;
    background-position: center;
    /* 设置背景层透明度为0.5，半透明效果 */
    opacity: 0.5;
    /* 让背景层位于内容下方 */
    z-index: -1;
}

/* 容器内部文字样式 */
.text {
    color: #333;
    font-size: 20px;
    padding: 20px;
}

对应的HTML结构如下：

<div class="container">
    <div class="text">这是容器内部的文字内容，背景图片是半透明的，文字保持不透明</div>
</div>

不同场景的适配方案

背景图需要平铺的场景

如果背景图需要平铺显示，只需要修改伪元素的background-repeat属性即可：

.tile-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("https://ipipp.com/tile-bg.png");
    background-repeat: repeat;
    background-size: auto;
    opacity: 0.3;
    z-index: -1;
}

伪元素使用::after的情况

除了::before，也可以使用::after伪元素，效果是一致的，只需要把选择器换成::after即可：

.after-container {
    position: relative;
    width: 400px;
    height: 250px;
}

.after-container::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("https://ipipp.com/after-bg.jpg");
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.7;
    z-index: -1;
}

注意事项

• 伪元素必须设置content属性，哪怕内容为空，否则伪元素不会生效
• 如果父容器本身有定位属性，不需要重复设置position，但是要确保伪元素的absolute定位是相对于父容器
• z-index的值不要设置得和其他定位元素冲突，避免背景层覆盖到其他内容
• 如果需要兼容旧版本浏览器，要注意伪元素的语法，旧版本IE需要使用单冒号:before和:after

这种使用伪元素单独设置背景层的方法，不仅可以调整背景图片的透明度，还可以单独对背景层做滤镜、渐变等效果，不会影响容器内部的其他内容，是前端开发中非常实用的技巧。

CSS伪元素background_opacityopacity伪类选择器修改时间：2026-06-16 09:42:37