模糊 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 }) => {&nbsp; const x = offsetX / target.clientWidth;&nbsp; const y = offsetY / target.clientHeight;&nbsp; target.style.setProperty('--x', `${x * 100}%`);&nbsp; target.style.setProperty('--y', `${y * 100}%`);});.image {&nbsp; width: 640px;&nbsp; height: 200px;&nbsp; position: relative;}.image::before, .image::after {&nbsp; content: '';&nbsp; display: block;&nbsp; position: absolute;&nbsp; width: 100%;&nbsp; height: 100%;&nbsp; top: 0;&nbsp; left: 0;&nbsp; background-image: var(--image);}.image::before {&nbsp; filter: blur(10px);}.image::after {&nbsp; clip-path: circle(20% at var(--x, 50%) var(--y, 50%));&nbsp; z-index: 1;}<div class="image" style="--image: url(https://picsum.photos/id/862/640/200)"><div>