如何在 HTML 中模糊图像的特定区域？

Question

主要思路是获取Canva网站首页的UI设计。这是链接： https: //www.canva.com/en_in/

我遵循的步骤：

1. 我发现没有办法模糊背景图像，所以我在<div>id="background" 中插入了一个图像。

2. 然后将其CSS修改为：

   #background{
     position:absolute; 
     top:0;
     left:0;
     z-index:-1;
   }
   

3. 现在我将对图像进行模糊处理，以便当我将鼠标悬停在图像上时，该特定部分会变得清晰。

4. 显然，当我将鼠标悬停在它上面时，整个图像变得清晰。

5. 但目标是清除鼠标指针悬停的区域。

6. 我想，我们应该利用鼠标事件 ClientX 属性来获取鼠标指针的位置并清除该特定坐标。

7. 但我对如何编码一无所知。

Answer 1

https://github.com/thdoan/magnify

一种简单的方法是使用放大来放大已经模糊的图像。

$(document).ready(function() {
  $('.zoom').magnify();
});

img {
 -webkit-filter: blur(10px);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnify/2.3.0/js/jquery.magnify.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/magnify/2.3.0/css/magnify.css" rel="stylesheet"/>


<img src="http://via.placeholder.com/350x150" class="zoom" data-magnify-src="http://via.placeholder.com/350x150">