React JS中基于固定HTML结构通过CSS实现中间透明的模糊遮罩框

嘿，我来帮你搞定这个需求！要实现中间裁剪区域清晰透明、周围区域模糊的效果，而且不能改动现有HTML结构，咱们完全可以通过CSS伪元素和滤镜来实现，下面分两种场景给你解决方案：

场景1：图片地址固定（纯静态CSS） #

如果你的图片src是固定值，直接用这个方案就行：

/* 1. 给容器设置相对定位，确保内部元素定位正常 */
.img-crop-container {
  position: relative;
  overflow: hidden;
}

/* 2. 让原图整体模糊，作为背景层 */
.img-crop-media {
  filter: blur(8px); /* 可根据需求调整模糊程度 */
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 3. 调整裁剪框层级，确保它能覆盖在模糊层之上 */
.reactEasyCrop_CropAreaRound {
  position: relative;
  z-index: 1;
  /* 可选：给裁剪框加白色边框，让它更显眼 */
  border: 2px solid #fff;
}

/* 4. 给裁剪框添加伪元素，显示清晰的原图，和裁剪框形状一致 */
.reactEasyCrop_CropAreaRound::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 这里替换成你的图片实际地址 */
  background-image: url('https://example.com/your-image.jpg');
  background-size: contain;
  background-position: center;
  /* 继承原图的位移/缩放变换，确保位置完全对齐 */
  transform: inherit;
  /* 裁剪成圆形，和裁剪框匹配 */
  border-radius: 50%;
  z-index: -1; /* 让伪元素在裁剪框边框下面 */
}

场景2：图片地址动态（兼容动态src） #

如果图片src是动态生成的，纯静态CSS没法直接获取img的src，这时候可以借助一点点JS（但不用修改HTML结构）来把src同步到CSS变量里，再用CSS调用：

第一步：添加几行JS（直接在组件逻辑里加即可） #

// 获取图片元素和容器
const imgElement = document.querySelector('.img-crop-media');
const container = document.querySelector('.img-crop-container');

// 把图片src同步到容器的CSS变量里
container.style.setProperty('--crop-image-src', `url(${imgElement.src})`);

// 如果图片是异步加载的，记得在load事件里执行
imgElement.addEventListener('load', () => {
  container.style.setProperty('--crop-image-src', `url(${imgElement.src})`);
});

第二步：修改CSS使用变量 #

把上面场景1里的background-image换成变量即可：

.reactEasyCrop_CropAreaRound::after {
  /* ...其他属性不变 */
  background-image: var(--crop-image-src);
}

补充说明 #

• 如果你不需要圆形裁剪，只需要把border-radius: 50%去掉，换成和裁剪框对应的形状就行。
• backdrop-filter虽然也能实现模糊，但它的兼容性不如filter好，如果需要兼容旧浏览器，优先用上面的滤镜方案。
• 模糊程度可以通过调整blur()里的数值来控制，数值越大模糊效果越强。

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