如何为背景图尺寸设为contain的div实现悬停仅给图片叠加色调而非全div染色

你现在的实现效果不对，本质是用来叠加色调的::before伪元素完全铺满了整个div的尺寸，但背景图因为设置了contain，实际显示区域只占容器的一部分，剩下的留白自然会被整块的叠层盖住，达不到只给图片本身染色的效果。
这个问题根本不需要用JS计算图片实际渲染尺寸，只要让叠层的显示规则和原背景图完全对齐就能解决，有两个可以直接落地的实现方案：

方案1：直接用多层背景层叠（代码最精简） #

CSS原生支持在同一个元素上叠加多层背景，完全可以把半透明色调作为最上层的背景，和原图应用完全一致的background-size、background-position、background-repeat规则，天生就会和图片边界严丝合缝对齐，不会溢出到留白区域。
甚至连伪元素都不需要加，用CSS变量控制透明度做过渡就行：

.image {
  --overlay-alpha: 0;
  position: relative;
  padding-top: 50%;
  /* 两层背景：第一层是半透明色调遮罩，第二层是原图 */
  background-image: 
    linear-gradient(rgba(0, 0, 0, var(--overlay-alpha)), rgba(0, 0, 0, var(--overlay-alpha))),
    url('https://specials-images.forbesimg.com/imageserve/5f9cca07d4c42920d4d348c7/960x0.jpg?fit=scale');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transition: --overlay-alpha 350ms ease;
}

.container:hover .image {
  --overlay-alpha: 0.3;
}

方案2：保留伪元素，修正对齐规则（兼容性更好） #

如果你习惯用伪元素做交互效果，只需要给原来的::before补上三个关键属性就行——别让整个伪元素的盒子当遮罩，而是把伪元素内部的半透明色也当成一个“背景图”，应用和原图完全一致的缩放、定位规则，让半透明色的显示范围和图片完全重合：

.image {
  position: relative;
  padding-top: 50%;
  background-image: url('https://specials-images.forbesimg.com/imageserve/5f9cca07d4c42920d4d348c7/960x0.jpg?fit=scale');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.image::before {
  content: "";
  position: absolute;
  inset: 0; /* 保持伪元素铺满父容器 */
  background-color: rgba(0, 0, 0, 0.3);
  /* 关键修正：*让半透明色的缩放、定位规则和原图完全一致* */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0;
  transition: opacity 350ms ease;
}

.container:hover .image::before {
  opacity: 1;
}

原理很简单：contain规则会把半透明的背景色自动按比例缩放到和图片一样的显示尺寸，居中放置，伪元素剩下的区域保持完全透明，自然不会盖到容器的留白部分。这个方案不需要依赖CSS自定义属性的过渡能力，对老版本浏览器的兼容性更好，后续如果需要给遮罩加模糊、描边这类拓展效果也更灵活。

注意事项 #

• 不管用哪个方案，之后如果调整原图的背景尺寸、定位、重复规则，一定要同步更新遮罩层的对应配置，不然容易出现错位。
• 不要给遮罩层设置额外的宽高、内边距，不然会破坏和原图的对齐关系。

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