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

将过滤器放在ID内的特定元素上

1 个答案: