将色调应用于背景图像

Question

我有一个下面的类，它有一个背景图像，这是我想要应用色调的图像：

<div class="jumbotron d-flex align-items-center" id="upper-half" style="background-image: url('${mediaInfo.backdrop}')">
  <div class="tint"></div>
</div>
<div class="class2">
  ....
  ....
</div>

类jumbotron和class2将屏幕分为两部分，两部分在屏幕上同时可见。

问题是，当我应用色调时，它适用于整个屏幕，甚至在类2上。真的，这不应该发生，因为它是在jumbotron类中定义的。

这是CSS：

#upper-half {
  background-size: cover;
  background-blend-mode: multiply;
}

.tint {
  z-index: 0;
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0, 0.9);
}

有人能告诉我发生了什么事吗？我希望色调只覆盖jumbotron类，而不是其他任何东西。

Answer 1

这是因为你的.tint类是绝对定位的，相对于body，因为你没有在其父母中应用position:relative ...

所以在position:relative中使用##upper-half

#upper-half {
  background-size: cover;
  background-blend-mode: multiply;
  position:relative;
}

Answer 2

因为它的风格，因为tint类absolute并覆盖整个屏幕。尝试将以下样式添加到您的#upper-half，我认为它将解决您的问题。

 #upper-half{
   position: relative;
   width: 100%;
   height: 200px;
   background-size: cover;
   background-blend-mode: multiply;
 }

将宽度和高度更改为您想要的尺寸，不要忘记使用position:relative;，否则tint将采用身体的尺寸。

希望这可以帮助