模糊 css 中除选定区域之外的所有图像

Question

我的要求是模糊图像，同时在选定区域保持不模糊。我通过绝对定位在图像上放置了一个 div。图像仅在该区域可见，除此区域外，所有其他图像都是模糊的。这是我的 DOM 结构<div className="col-md-12 align-center mgb-30">//within this area image is unblur while rest of image is blurred<div className="venue-image-filter flex all-center color-white"><h3 className="heading">Visible Area</h3></div><img src="https://i.picsum.photos/id/237/200/300.jpg" className="border-radius-10" alt="Venue" /></div>过滤器 div 的样式.venue-image-filter{position:absolute;top:50%;left:50%;width:300px;height:200px;transform:translate(-50%,-50%);}

Answer 1

这是一个如何执行此操作的小演示：

document.querySelector('.image').addEventListener('mousemove', ({ offsetX, offsetY, target }) => {

  const x = offsetX / target.clientWidth;

  const y = offsetY / target.clientHeight;

  target.style.setProperty('--x', `${x * 100}%`);

  target.style.setProperty('--y', `${y * 100}%`);

});

.image {

  width: 640px;

  height: 200px;

  position: relative;

}

.image::before, .image::after {

  content: '';

  display: block;

  position: absolute;

  width: 100%;

  height: 100%;

  top: 0;

  left: 0;

  background-image: var(--image);

}

.image::before {

  filter: blur(10px);

}

.image::after {

  clip-path: circle(20% at var(--x, 50%) var(--y, 50%));

  z-index: 1;

}

<div class="image" style="--image: url(https://picsum.photos/id/862/640/200)"><div>