在 css / html 中重置模糊属性答案

【问题标题】：Reset blur property in css / html在 css / html 中重置模糊属性
【发布时间】：2021-09-24 21:07:02
【问题描述】：

我的问题是如何放置带有过滤器的图像：模糊，以便稍后更改 div 的光标，并使用 cursor: none 隐藏它；并且使用背景过滤器，您可以“删除”该模糊，能够通过将 div 传递给图像来锐化图像。 PS：“悬停不起作用，因为只需传递一点图像就已经受到整个属性的影响，这就是为什么我必须使用背景过滤器”

我的代码：

const cursor = document.querySelector('.cursor');

document.addEventListener('mousemove', e => {
  cursor.setAttribute("style", "top: " + (e.pageY - 50) + "px; left: " + (e.pageX - 50) + "px;");
})

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  cursor: none;
}

.cursor {
  width: 7em;
  height: 7em;
  border: 3px solid white;
  border-radius: 100%;
  position: absolute;
  /*Como no se puede poner un blur negativo, intente resetearlo cambiando el -5 por un 0, pero tampoco funciono*/
  backdrop-filter: blur(-5px);
  -webkit-backdrop-filter: blur(-5px);
}

.peces img {
  height: 15vh;
  filter: blur(5px);
}

<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>repl.it</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <div class="peces" id="uno"><img src="images/01.png"></div>
  <div class="peces" id="dos"><img src="images/02.png"></div>
  <div class="peces" id="tres"><img src="images/03.png"></div>
  <div class="peces" id="cuatro"><img src="images/03.png"></div>

  <div class="cursor"></div>
  <script src="script.js"></script>
</body>

</html>

感谢您的回答 =)

【问题讨论】：

标签： javascript html css filter blur

【解决方案1】：

你需要使用 svg 来做这件事。不幸的是，我不知道是否有更好的方法。

$('.pic').mousemove(function (event) {
    event.preventDefault();
    var upX = event.clientX;
    var upY = event.clientY;
    var mask = $('#mask1 circle')[0];
    mask.setAttribute("cy", (upY - 5) + 'px');
    mask.setAttribute("cx", (upX) + 'px');
});


$('.pic').mousemove(function (event) {
    event.preventDefault();
    var upX = event.clientX;
    var upY = event.clientY;
    var mask = $('#mask1 circle')[0];
    mask.setAttribute("cy", (upY - 5) + 'px');
    mask.setAttribute("cx", (upX) + 'px');
});

.pic {
    height:600px;
}
.blur {
    height: 100%;
}
.overlay {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
}
svg image{
  width:350px
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="pic">
    <svg class="blur" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%">
        <image filter="url(#filter2)" xlink:href="https://i.imgur.com/EJOjIMC_d.webp?maxwidth=760&fidelity=grand" ></image>
        <filter id="filter2">
            <fegaussianblur stdDeviation="5" />
        </filter>
        <mask id="mask1">
            <circle cx="-50%" cy="-50%" r="80" fill="white" filter="url(#filter2)" />
        </mask>
        <image xlink:href="https://i.imgur.com/EJOjIMC_d.webp?maxwidth=760&fidelity=grand" mask="url(#mask1)"></image>
    </svg>
</div>

【讨论】：