CSS 定义的带有模糊过渡的边缘答案

【问题标题】：CSS defined edges with blur transitionCSS 定义的带有模糊过渡的边缘
【发布时间】：2021-01-23 03:09:36
【问题描述】：

我正在制作一个带有模糊背景图像的大按钮，当你将鼠标悬停在它上面时它会变得模糊。我使用了一个隐藏溢出的容器，并在背景图像上设置了负边距，以便定义边缘。

但是，当我将鼠标悬停在图像上时，它会从模糊过渡到不模糊，反之亦然，图像的边缘不再被定义。这会产生一种效果，使其下方的白色容器的边缘可见。在完全模糊或完全不模糊时，这些边缘会立即重新定义。

我该如何解决这个问题？

body {
  background-color: black;
}

.container {
    position: fixed;
    top: 2.5vh;
    left: 2.5vh;
    width: 50vh;
    height: 50vh;
    background-color: white;
    overflow: hidden;
}

.image {
    background-image: url(https://www.decorativefair.com/wp-content/uploads/2017/09/yellow-wallpaper-12-1024x640.jpg);
    margin: -5%;
    width: 110%;
    height: 110%;
    filter: blur(6px);
    transition: 1s;
}

.image:hover {
    filter: blur(0px);
}

<!DOCTYPE html>
<html>
    <body>
        <div class="container">
            <div class="image"></div>
            placeholder text
        </div>
    </body>
</html>

【问题讨论】：

嗨，欢迎来到 SO。请输入最小可重现代码 sn-p (ctrl + m)。
@tacoshy 我的错，这是我第一次在这里发帖，它在
不幸的是，我无法使用提供的代码重现错误。有没有其他冲突的代码？你已经清除浏览器缓存了吗？
@tacoshy 我已经清除了浏览器缓存，当我在这里运行代码 sn-p 时可以看到问题
有趣。你能提供它的截图吗？就像我说的，如果我悬停，我真的没有白色背景。你用的是什么浏览器？

标签： html css css-transitions css-filters

【解决方案1】：

我认为这是一个浏览器错误。

可以在边框处看到容器背景。

如果容器背景与图像相同，则可以使其不那么明显。我在图像中使用了继承以避免将其设置在 2 个位置。

body {
  background-color: black;
}

.container {
    position: fixed;
    top: 2.5vh;
    left: 2.5vh;
    width: 50vh;
    height: 50vh;
    background-image: url(https://www.decorativefair.com/wp-content/uploads/2017/09/yellow-wallpaper-12-1024x640.jpg);
    overflow: hidden;
}

.image {
    background-image: inherit;
    margin: -5%;
    width: 110%;
    height: 110%;
    filter: blur(6px);
    transition: 1s;
}

.image:hover {
    filter: blur(0px);
}

<!DOCTYPE html>
<html>
    <body>
        <div class="container">
            <div class="image"></div>
            placeholder text
        </div>
    </body>
</html>

【讨论】：

这在一定程度上有效，但在我当前的代码中，按钮足够大，定义的边缘仍然突出。

【解决方案2】：

该问题似乎是由.image css 类中的负边距和 110% 宽度和高度设置引起的。我假设您这样做是为了在模糊时尝试保持清晰的边缘。我修改了这些，下面的 sn-p 显示了结果。希望它会有用：

body {
  background-color: black;
}

.container {
    position: fixed;
    top: 2.5vh;
    left: 2.5vh;
    width: 50vh;
    height: 50vh;
    overflow: hidden;
}

.image {
    background-image: url(https://www.decorativefair.com/wp-content/uploads/2017/09/yellow-wallpaper-12-1024x640.jpg);
    margin: 0;
    width: 100%;
    height: 100%;
    filter: blur(6px);
    transition: 1s;
}

.image:hover {
    filter: blur(0px);
}

<!DOCTYPE html>
<html>
    <body>
        <div class="container">
            <div class="image"></div>
            placeholder text
        </div>
    </body>
</html>

【讨论】：

这使它保持一致，但仍然不是我想要的效果。我会尝试在它后面放一张背景图片，这样边缘就不明显了。