Question

我正在尝试将滤镜添加到正文的背景图像中。我目前正在使用此代码：

body {
    background: url("/img/congruent_pentagon.png");
    color: white;
    font-family: "Raleway";
    -webkit-filter: grayscale(1);
}

它使所有子元素都处于灰度级，而不是背景图像本身。我已经研究过其他人做了什么，主要是人们操纵html元素。这不是我想要实现的目标。甚至可以用这种方式添加过滤器吗？如果是这样，怎么样？

Answer 1

与使用Photoshop 或类似的去饱和图像相比，这只是太多工作。

据说...... 您可以使用pseudo-element选择器。在我的情况下，我将背景添加到pseudo-element :before

然后我确定它的大小正确并添加了否定 z-index，以便始终呈现在正文的内容之后而不是在顶部。

然后我将滤镜应用到它。

我相信这就是你想要的。

＆＃13;

body {
margin: 0 auto;
}

body:before {
  background: url("https://unsplash.it/1920/?image=1062") no-repeat center;
  background-size: 100%;
  content: "";
  height: 100vh;
  width: 100vw;
  position: fixed;
  filter: grayscale(1);
  z-index: -1;

}

.content {
  opacity: .6;
  height: 200px;
  width: 200px;
  display: inline-block;
  margin: 1em;
}

/* color fluff */
.aa {background: yellow;}
.bb {background: red;}
.cc {background: green;}
.dd {background: orange;}

＆＃13;

<div class="container">
  <div class="content aa"></div>
  <div class="content bb"></div>
  <div class="content cc"></div>
  <div class="content dd"></div>
</div>

＆＃13;

如何将滤镜添加到正文中的背景图像

1 个答案: