在 ID 内的特定元素上放置过滤器 [重复]

Question

在我创建的 ID 内的图像上放置过滤器时，背景和文本都会被过滤，而我的目的只是降低背景的亮度

我尝试过制作单独的类和 ID，但没有任何效果符合我的要求。

HTML

<section id="showcase">
      <div class="container">
        <h1>Hello</h1>
        <p>I need to type something in here</p>
      </div>
    </section>

CSS

#showcase{
  min-height: 400px;
  background:url('../img/writing-code33.jpg');
  filter: brightness(20%);
  background-size: cover;
  text-align: center;
  color: #ffffff;
}
/*#showcase background{
  filter: brightness(20%);
}*/

#showcase h1{
  margin-top: 100px;
  font-size: 55px;
  margin-bottom: 10px;
}

Answer 1

#showcase 上的过滤器应用于其所有子级。所以你需要将内容移到它之外。尝试以下解决方案。这也会将文本移到顶部并水平居中。

HTML

<section id="showcase"></section>
<div class="container">
   <h1>Hello</h1>
   <p>I need to type something in here</p>
</div>

CSS

#showcase {
  min-height: 400px;
  background: url('../img/writing-code33.jpg');
  filter: brightness(20%);
  background-size: cover;
}

.container {
  position: absolute;
  color: #ffffff;
  text-align: center;
  top: 0px;
  left: 50%;
  transform: translate(-50%);
}

#showcase h1 {
  margin-top: 100px;
  font-size: 55px;
  margin-bottom: 10px;
}