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

Posted 2023-03-06

【中文标题】在 ID 内的特定元素上放置过滤器 [重复]

【英文标题】：Putting a filter on a specific element inside an ID [duplicate]

【发布时间】：2019-11-23 12:46:30

【问题描述】：

在我创建的 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;

【问题讨论】：

我会将. container 放在#showcase 之外，并将两者都包装在一个div 中——例如。接下来我将.container绝对定位在#showcase

【参考方案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;

【讨论】：

它似乎可以正常工作，但文本在#showcase 区域之外

使用给定的 html 和 css，它在我这边运行良好。可能有一些其他样式可能导致文本出现在#showcase

之外

好的，谢谢你的帮助，我想我现在知道了