时间戳

首页 > 解决方案 > 如何在 HTML 中模糊图像的特定区域？

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

问题描述

主要思想是获取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. 但我对如何编码一无所知。

标签： javascripthtmlcss

解决方案

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

推荐阅读