CSS ::before伪元素失效：如何单独调整背景图片透明度

核心问题 #

<img>是CSS替换元素，这类元素（包括<input>、<select>等）用于加载外部资源，浏览器不会为它们生成::before/::after伪元素——这是标准规则，所以你给.img添加的伪元素完全不会被渲染。另外你尝试的$::before是Sass预处理器的变量语法，纯CSS环境下不生效。

需求实现方案 #

你的目标是让背景图片半透明，同时文字不受透明度影响，正确的做法是用父容器的伪元素承载背景图，让文字处于伪元素的上层：

1. 修改HTML结构

移除<section>里的<img>标签，让文字直接作为容器子元素：

<section class="land_page">
    <div class="text center">
        <p>Bring freshness into your place.</p>
        <h1>Plants are awesome!</h1>
    </div>
</section>

2. 调整CSS样式

给父容器设置相对定位，用伪元素实现半透明背景图，同时提升文字层级：

/* section 1 */
.land_page{
    width: 100%;
    min-height: 500px;
    padding-top: 1cm;
    position: relative; /* 为伪元素提供定位基准 */
    overflow: hidden;
}
.land_page .text{
    position: relative; /* 开启层级控制 */
    display: flex;
    flex-direction: column;
    margin-top: 3cm;
    z-index: 1; /* 确保文字在背景上方 */
    color: #000; /* 可根据背景调整文字颜色，提升可读性 */
}
.land_page .text h1{
    font-size: 4rem;
}
/* 半透明背景图伪元素 */
.land_page::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('./assets/plantsbg3.jpeg');
    background-size: cover; /* 让背景图覆盖容器 */
    background-position: center; /* 居中显示背景图 */
    opacity: 0.1; /* 设置10%透明度 */
    z-index: 0;
}

补充说明 #

如果一定要保留<img>标签，可给.land_page添加伪元素作为半透明遮罩，覆盖在图片上方，但这种方式不如直接用背景图简洁：

.land_page{
    position: relative;
}
.land_page::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0.9; /* 遮罩透明度，和图片叠加后整体透明度类似10% */
    z-index: 0;
}
.land_page .img{
    width: 100%;
    position: relative;
    z-index: -1;
}
.land_page .text{
    position: relative;
    z-index: 1;
}

内容的提问来源于stack exchange，提问作者Sarah Bader