如何在HTML CSS中实现背景图灰度化且不影响叠加文本？

核心问题：直接给.top添加filter: grayscale()会让所有子元素（包括文本）也变成灰度。要实现仅背景图灰度、文本正常显示，有两种可靠方法：

方法一：伪元素承载背景图（推荐） #

把背景图移到.top的伪元素上，单独给伪元素加灰度滤镜，文本内容在正常层级不受影响：

修改后的CSS代码：

.top {
    position: relative; /* 让伪元素基于该元素定位 */
    padding-bottom: 500px;
    padding-top: 50px;
    border-bottom: 10px solid;
    /* 移除原background-image相关属性 */
}

/* 生成伪元素作为灰度背景层 */
.top::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../Images/46162.webp');
    background-repeat: no-repeat;
    background-size: cover;
    filter: grayscale(100%); /* 设置全灰度 */
    z-index: -1; /* 将背景层置于内容下方 */
}

.titleMain {
    margin-left: 5%;
    margin-right: 70%;
    margin-top: 5%;
    padding-bottom: 40px;
    font-size: xx-large;
}

.titleMainText {
    margin-left: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    font-weight: bolder;
    color: black;
}

原理说明： #

• 伪元素是独立的图层，滤镜只作用于它本身，完全不会影响.top内部的文本内容。
• z-index: -1确保背景层在文本下方，不会遮挡内容。

方法二：背景混合模式（简洁但需兼容处理） #

如果目标浏览器支持background-blend-mode，可以用混合模式快速实现，但需要给文本容器重置滤镜：

.top {
    padding-bottom: 500px;
    padding-top: 50px;
    border-bottom: 10px solid;
    background-image: url('../Images/46162.webp');
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #000;
    background-blend-mode: luminosity;
    filter: grayscale(100%);
}

.titleMain {
    margin-left: 5%;
    margin-right: 70%;
    margin-top: 5%;
    padding-bottom: 40px;
    font-size: xx-large;
    filter: none; /* 抵消父元素的滤镜影响 */
}

.titleMainText {
    margin-left: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    font-weight: bolder;
    color: black;
}

注意事项： #

• 这种方法依赖浏览器对background-blend-mode的支持，旧版IE不兼容。
• 必须给文本容器加filter: none，否则文本会继承父元素的灰度滤镜。

内容的提问来源于stack exchange，提问作者Thomas Taylor