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 将屏幕分为两部分，两部分在屏幕上同时显示。

问题是，当我应用色调时，它适用于整个屏幕，即使在类 class2 上也是如此。理想情况下，这不应该发生，因为它是在h 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将采用身体的尺寸。

希望这有帮助

将色调应用于背景图像

2 个答案: