如何在HTML中模糊图像的特定区域? [英] How do I blur a particular area of an image in HTML?

问题描述

主要思想是获得Canva网站主页的UI设计.这是链接: https://www.canva.com/en_in/

The main idea is to obtain the UI design of the Canva website homepage. Here's the link: https://www.canva.com/en_in/

我遵循的步骤:

1. 我找不到使背景图像模糊的方法，因此我将图像插入id为"background"的< div> 内.

然后将其CSS修改为:

And then modified the CSS of it as:

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

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

Now I'll blur the image so that, when I hover my mouse over it, that particular part gets clear.

很明显，当我将鼠标悬停在其上时，整个图像会变得清晰.

Obviously, when I hover over it, the entire image gets clear.

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

But the goal is to clear the area where the mouse pointer overs at.

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

I guess, we should make use of the Mouse event ClientX property to get the position of the mouse pointer and clear that particular co- ordinate.

但是我对如何编写代码一无所知.

But I'm clueless on how to code it.

推荐答案

https://github.com/thdoan/magnify

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

A simple way would to use magnify to zoom over the already blurred image.

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

这篇关于如何在HTML中模糊图像的特定区域?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！