模糊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>

滤池造型

.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>

​