如何制作匹配响应式图片尺寸的Div遮罩并实现未选中图片变暗

嘿，我来帮你搞定这个问题！你当前的遮罩（overlay）用了固定的宽度、高度和定位值，这就是它没法跟着响应式图片一起缩放的核心原因。咱们可以通过调整HTML结构和CSS逻辑，让遮罩完美贴合图片，同时实现未选中图片变暗、悬停高亮显示信息的效果。

第一步：调整HTML结构 #

把每一张图片和对应的遮罩都放进一个相对定位的容器里，这样遮罩的定位就会以这个容器为参考，而不是整个页面。示例结构如下：

<div class="image-container image-container--p1">
  <img src="你的图片路径" alt="图片描述">
  <div class="overlay">图片的更多信息</div>
</div>

<div class="image-container image-container--p2">
  <img src="你的图片路径" alt="图片描述">
  <div class="overlay">图片的更多信息</div>
</div>

<div class="image-container image-container--p3">
  <img src="你的图片路径" alt="图片描述">
  <div class="overlay">图片的更多信息</div>
</div>

第二步：重构CSS样式 #

现在咱们把原来固定尺寸的遮罩改成自适应的，同时实现未选中变暗的效果：

/* 图片容器：作为遮罩的定位参考，同时控制图片的响应式 */
.image-container {
  position: relative;
  width: 55%; /* 你原来的图片宽度，可根据需求改成百分比/vw等响应式单位 */
  filter: brightness(0.7); /* 未悬停时图片变暗 */
  transition: filter 0.3s ease; /* 平滑过渡效果 */
}

/* 确保图片自适应容器，保持比例 */
.image-container img {
  width: 100%;
  height: auto;
  display: block; /* 去除图片默认的底部间隙 */
}

/* 遮罩：自动填满容器，适配响应式变化 */
.overlay {
  position: absolute;
  inset: 0; /* 等同于top:0; right:0; bottom:0; left:0，自动填满容器 */
  background-color: rgba(0, 0, 0, 0.5); /* 你想要的半透明加深色调 */
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff; /* 信息文字颜色，可自行调整 */
  opacity: 0; /* 初始隐藏信息，悬停时显示 */
  transition: opacity 0.3s ease;
}

/* 悬停时：图片恢复正常亮度，显示遮罩信息 */
.image-container:hover {
  filter: brightness(1);
}

.image-container:hover .overlay {
  opacity: 1;
}

/* 保留你原来的布局定位逻辑，只作用于容器 */
.image-container--p1 {
  left: 0;
  top: -2rem;
  position: absolute; /* 根据你的整体布局选择relative/absolute */
}

.image-container--p2 {
  right: 0;
  top: 2rem;
  position: absolute;
}

.image-container--p3 {
  left: 20%;
  top: 10rem;
  position: absolute;
}

关键逻辑说明 #

1. 相对定位容器：让遮罩的定位完全依赖图片容器，不管图片怎么缩放，遮罩都会自动贴合边缘。
2. inset: 0属性：替代了繁琐的四个方向定位，确保遮罩100%填满容器，完美适配响应式变化。
3. filter: brightness()：用滤镜控制图片亮度，比单独调整遮罩背景更直观，能让未选中的图片整体变暗，悬停时恢复正常。
4. 过渡动画：让亮度变化和信息显示更平滑，提升用户体验。

你只需要根据自己的页面布局，微调容器的位置（比如image-container--p1这类类名的样式），遮罩部分完全不用再手动设置尺寸啦！

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