如何将css过滤器应用于固定背景图像

我在做一个网站，有一个固定的背景图片，上面有一些可滚动的元素。我想在图像上应用灰度过滤器，它可以工作，但不幸的是，这个过滤器也适用于容器文本，所以文本也是灰色的，但我不希望这样。我只希望图像有灰度，而不是上面的元素。如何解决这个问题

这是引导代码：

    <section id="section-toTheTop"
    class="jumbotron jumbotron-fluid fixed-background d-flex justify-content-center align-items-center">
    <div class="container text-center">
        <h1 class="display-1 text-primary">PHOTOSERVICE</h1>
        <p class="display-4 d-none d-sm-block text-white">Capture every moment</p>
        <p class="lead text-white">Create stunning photos and videos by using the built-in features for enhancement.</p>
        <p class="lead text-white">Share your best shots with your friends and the rest of the world instantly.</p>
        <p><strong class="text-white">Download now on:</strong></p>
        <a href="#" class="btn btn-primary btn-lg"><i class="fab fa-fw fa-apple"></i> App Store</a>
        <a href="#" class="btn btn-primary btn-lg"><i class="fab fa-fw fa-google-play"></i> Play Store</a>
     </div>
     </section>

@Hibrit Usta，最后，在玩z-index时，我使用了以下技巧：

<div class="overlay"></div>
<section id="section-toTheTop"
    class="jumbotron jumbotron-fluid fixed-background d-flex justify-content-center align-items-center">
    <div class="container text-center text-over-image">
        <h1 class="display-1 text-primary">PHOTOSERVICE</h1>
        <p class="display-4 d-none d-sm-block text-white">Capture every moment</p>
        <p class="lead text-white">Create stunning photos and videos by using the built-in features for enhancement.</p>
        <p class="lead text-white">Share your best shots with your friends and the rest of the world instantly.</p>
        <p><strong class="text-white">Download now on:</strong></p>
        <a href="#" class="btn btn-primary btn-lg"><i class="fab fa-fw fa-apple"></i> App Store</a>
        <a href="#" class="btn btn-primary btn-lg"><i class="fab fa-fw fa-google-play"></i> Play Store</a>
    </div>
</section>



.fixed-background {
    background-image: url("img/background.jpg");
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    min-height: 100vh;
}

.overlay {
    position: absolute;
    min-height: 100%;
    min-width: 100%;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.75);
}
.text-over-image {
    z-index: 0
}

光服务
捕捉每一刻
通过使用内置功能进行增强，创建令人惊叹的照片和视频
立即与您的朋友和世界其他地方分享您的最佳照片
立即下载：

.固定背景{
背景图片：url（“img/background.jpg”）；
背景尺寸：封面；
背景附件：固定；
背景位置：中心；
最小高度：100vh；
}
.覆盖{
位置：绝对位置；
最小高度：100%；
最小宽度：100%；
左：0；
排名：0；
背景：rgba（0,0,0,0.75）；
}
.图像上的文本{
z索引：0
}

您可以尝试下面的代码

。固定背景{
位置：相对位置；
}
.固定背景：：之前{
内容：“；
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
背景图像：url（“https://i.picsum.photos/id/237/1600/1600.jpg");
背景尺寸：封面；
背景附件：固定；
背景位置：中心；
最小高度：100vh；
滤镜：灰度（100%）；
}
.固定背景.容器{
位置：相对位置；
}

光服务
捕捉每一刻
通过使用内置功能进行增强，创建令人惊叹的照片和视频
立即与您的朋友和世界其他地方分享您的最佳照片
立即下载：

谢谢你，我会用你的技巧。但碰巧还有其他方法吗？因为我对css不是很熟悉，我现在只知道css的基本知识。我分享了另一个解决方案。您可以查看更新。确定似乎更容易。非常感谢。但它会弄乱页面下面的其他代码。也许我应该用你的第一个例子。另一个解决方案是photoshop

<div class="overlay"></div>
<section id="section-toTheTop"
    class="jumbotron jumbotron-fluid fixed-background d-flex justify-content-center align-items-center">
    <div class="container text-center text-over-image">
        <h1 class="display-1 text-primary">PHOTOSERVICE</h1>
        <p class="display-4 d-none d-sm-block text-white">Capture every moment</p>
        <p class="lead text-white">Create stunning photos and videos by using the built-in features for enhancement.</p>
        <p class="lead text-white">Share your best shots with your friends and the rest of the world instantly.</p>
        <p><strong class="text-white">Download now on:</strong></p>
        <a href="#" class="btn btn-primary btn-lg"><i class="fab fa-fw fa-apple"></i> App Store</a>
        <a href="#" class="btn btn-primary btn-lg"><i class="fab fa-fw fa-google-play"></i> Play Store</a>
    </div>
</section>



.fixed-background {
    background-image: url("img/background.jpg");
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    min-height: 100vh;
}

.overlay {
    position: absolute;
    min-height: 100%;
    min-width: 100%;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.75);
}
.text-over-image {
    z-index: 0
}