如何使用clip-path裁剪图片并调暗未裁剪区域的亮度

你之前直接对原图设置clip-path的问题在于，clip-path会完全隐藏路径外的区域，自然无法保留调低亮度的外层内容，两种常用实现方案如下：

方案1：双层图片+clip-path实现（支持任意形状高亮区域） #

该方案可适配方形、圆形、自定义多边形等任意高亮形状，兼容性表现最好。

<div class="scanner-container">
  <!-- 底层：调低亮度的完整图片 -->
  <img src="替换为你的图片本地路径" alt="扫描原图" class="base-img">
  <!-- 上层：仅显示高亮区域的原图 -->
  <img src="替换为你的图片本地路径" alt="高亮区域" class="highlight-area">
</div>

.scanner-container {
  position: relative;
  width: 400px; /* 可按实际图片尺寸调整 */
  height: auto;
}
.scanner-container img {
  display: block;
  width: 100%;
  height: auto;
}
.base-img {
  filter: brightness(0.4); /* 调整数值控制非高亮区域亮度，数值越小越暗 */
}
.highlight-area {
  position: absolute;
  left: 0;
  top: 0;
  /* 示例为裁剪上下左右各留100px的200*200方形，参数顺序为上、右、下、左，可自行调整 */
  clip-path: inset(100px 100px 100px 100px);
}

如果需要添加扫描框边框，可在容器内新增一个绝对定位的div，尺寸位置和高亮区域保持一致，单独设置边框样式即可。

方案2：单图+遮罩层实现（仅方形高亮，代码更简洁） #

如果高亮区域为固定方形，使用大阴影挖空方案无需叠图，代码更简单：

<div class="scanner-container">
  <img src="替换为你的图片本地路径" alt="扫描原图">
  <div class="scan-frame"></div>
</div>

.scanner-container {
  position: relative;
  width: 400px; /* 可按实际图片尺寸调整 */
  overflow: hidden; /* 裁剪超出容器的阴影部分 */
}
.scanner-container img {
  width: 100%;
  display: block;
}
.scan-frame {
  position: absolute;
  left: 100px; /* 调整扫描框水平位置 */
  top: 100px; /* 调整扫描框垂直位置 */
  width: 200px; /* 扫描框宽度 */
  height: 200px; /* 扫描框高度 */
  border: 2px solid #0f0; /* 扫描框绿色边框，和示例效果一致 */
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5); /* 超大阴影覆盖外围区域，实现调低亮度效果 */
}

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