如何不使用background-image为动态尺寸图片添加适配的纯黑不透明遮罩？

原有代码失效原因 #

• 父容器的黑色背景处于img元素下层，被图片完全遮挡，因此看不到遮罩效果
• 父容器缺少正确的尺寸适配规则，无法和动态变化的图片尺寸保持同步

实现方案 #

无需使用background-image属性，仅通过基础定位规则即可实现和图片尺寸完全匹配、无溢出的纯黑遮罩，图片宽高动态变化时遮罩会自动同步适配。

原生HTML+CSS实现

<div class="img-wrapper">
  <img src="https://www.apimages.com/Images/Ap_Creative_Stock_Header.jpg" alt="Flying Kites">
</div>

/* 父容器尺寸完全跟随图片自适应 */
.img-wrapper {
  position: relative;
  display: inline-block;
}
/* 清除图片默认底部间距 */
.img-wrapper img {
  display: block;
}
/* 纯黑遮罩，完全铺满父容器 */
.img-wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #000;
  z-index: 10;
  /* 若需要半透明遮罩可添加 opacity: 0.5，纯黑不透明无需添加 */
}

Tailwind CSS实现（匹配你原有代码的类风格）

无需额外写CSS，直接通过工具类实现：

<div class="relative inline-block">
  <img class="block" src="https://www.apimages.com/Images/Ap_Creative_Stock_Header.jpg" alt="Flying Kites">
  <div class="absolute inset-0 bg-black z-10"></div>
</div>

核心规则说明 #

• 父容器设置position: relative为遮罩提供定位上下文，display: inline-block保证父容器宽度自动收缩到和图片宽度一致，不会占满整行
• 遮罩设置inset: 0等价于同时设置top:0;right:0;bottom:0;left:0，会自动铺满整个父容器，尺寸和图片完全一致
• 图片设置display: block清除默认行高带来的底部3px间距，避免父容器高度比图片多出冗余空间

内容的提问来源于stack exchange，提问作者jordansmith