javascript - 模糊除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%);
}

标签： javascripthtmlcss

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>