带穿孔边缘图片的Hover蓝色覆盖层与文字适配问题

要让覆盖层完美贴合图片的穿孔边缘，有几种可行的CSS方案，优先推荐CSS遮罩（mask），实现简单且效果精准：

方案一：使用CSS mask（推荐） #

如果你的图片本身带有透明的穿孔区域（穿孔部分完全透明），可以直接用这张图片作为覆盖层的遮罩，让覆盖层只显示图片不透明的区域。

修改你的CSS代码，给.overlay添加遮罩属性：

.container {
  position: relative;
  width: 50%;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #008CBA;
  /* 添加遮罩，复用图片作为遮罩源 */
  -webkit-mask: url('https://drive.google.com/uc?id=1bUjgS-HG5b4Txt7sS03c0QGkMDiQ2kgh') 0 0 / 100% 100%;
  mask: url('https://drive.google.com/uc?id=1bUjgS-HG5b4Txt7sS03c0QGkMDiQ2kgh') 0 0 / 100% 100%;
}

.container:hover .overlay {
  opacity: .5;
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

如果图片本身没有透明通道，你可以单独制作一张和原图边缘形状完全一致的PNG遮罩图（穿孔部分透明，其余不透明），再把mask属性里的URL换成这张遮罩图的路径即可。

方案二：使用SVG clipPath #

如果需要更复杂的形状控制，或者不想额外引入图片，可以用SVG的clipPath定义穿孔形状，再给覆盖层应用clip-path属性。

示例代码：

<div class="container">
  <img src="你的图片路径" alt="Avatar" class="image">
  <!-- 定义SVG遮罩 -->
  <svg style="position: absolute; width: 0; height: 0;">
    <clipPath id="perforatedClip" clipPathUnits="objectBoundingBox">
      <!-- 根据实际穿孔形状调整路径，示例为左右带半圆穿孔的矩形 -->
      <path d="M0.05,0 C0.022,0 0,0.022 0,0.05 L0,0.95 C0,0.978 0.022,1 0.05,1 L0.95,1 C0.978,1 1,0.978 1,0.95 L1,0.05 C1,0.022 0.978,0 0.95,0 L0.05,0 Z" />
    </clipPath>
  </svg>
  <div class="overlay">
    <div class="text">Hello World</div>
  </div>
</div>

对应的CSS补充：

.overlay {
  /* 保留原有属性 */
  clip-path: url(#perforatedClip);
}

这种方法需要你根据实际穿孔形状编写SVG路径，适合需要自定义形状且不想依赖图片的场景。

方案三：拼接多个元素（不推荐） #

如果上述方案都无法使用，也可以用多个div元素拼接出穿孔的形状，但这种方法维护成本高，形状调整麻烦，仅作为备选。

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