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

Question

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

这是引导程序代码：

<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>

这是css代码：

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

@Hibrit Usta，在最后，玩z索引，我用了这个技巧：

<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
}

Answer 1

您可以尝试下面的代码。

.fixed-background {
position: relative;
}

.fixed-background::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url("https://i.picsum.photos/id/237/1600/1600.jpg");
background-size: cover;
background-attachment: fixed;
background-position: center;
min-height: 100vh;
filter: grayscale(100%);
}
.fixed-background  .container {
position: relative;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<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>

另一种解决方案：

.bg-fixed {
background-image: url("https://i.picsum.photos/id/237/1600/1600.jpg");
background-size: cover;
background-attachment: fixed;
background-position: center;
min-height: 100vh;
filter: grayscale(100%);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -99;
}

.jumbotron {
background-color: transparent!important;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<section class="bg-fixed">
</section>
<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>