覆盖图像？答案

【问题标题】：Cover an image?覆盖图像？
【发布时间】：2021-09-30 09:49:35
【问题描述】：

我想在我的图像上贴一张不透明的黑纸。

<div class="bg-black z-50 absolute" >
  <img class="" src="https://www.apimages.com/Images/Ap_Creative_Stock_Header.jpg" alt="Flying Kites">
</div>

我已经搜索过，但只找到了使用 html/css 和使用 background-image 的解决方案，这是我无法在我的项目中使用的东西。如何在不知道图像宽度/高度（它会改变）的情况下获得黑色方块（适合图像，没有重叠或多余）。

尝试了上述变体，但没有显示任何内容（屏幕上没有黑色）

【问题讨论】：

那么你可以在你的项目中使用什么？具体一点。
@user202729 只是一个图像标签。我们通过使用绝对和相对使其成为“背景图像。添加附加代码...
那么“家庭作业”？在这种情况下，第一步是首先了解绝对和相对，然后看看它是如何应用的（也许还有一些其他相关的东西，比如 z-index、left 或 top）
@user202729 不，完成了学校。这是一个项目。我们尝试过使用 z-index。它什么也没做。不知道如何让“封面”也有正确的 w/h。即使尝试了 w-full 之类的东西

标签： html css tailwind-css

【解决方案1】：

如果您无法更改标记，可以将容器 div 的 background-color 设置为黑色，并缩小图像的 opacity。

.bg-black {
  background-color: #000;
}

.bg-black img {
  opacity: 0.5;
}

<div class="bg-black z-50 absolute">
  <img class="" src="https://www.apimages.com/Images/Ap_Creative_Stock_Header.jpg" alt="Flying Kites">
</div>

或者，您可以绝对将 div 放置在图像顶部并在此处设置其不透明度：

.bg-black {
  position: relative;
}

.overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.5;
  background-color: #000;
}

<div class="bg-black z-50 absolute">
  <div class="overlay"></div>
  <img class="" src="https://www.apimages.com/Images/Ap_Creative_Stock_Header.jpg" alt="Flying Kites">
</div>

【讨论】：