CSS 用模糊过渡定义的边缘

Question

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

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

我该如何解决这个问题？

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>

Answer 1

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

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

如果容器背景与图像相同，可以使其不那么明显。我在图像中使用了 inherit 以避免在 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>

Answer 2

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

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>

CSS 用模糊过渡定义的边缘

CSS defined edges with blur transition

html

css

css-transitions

css-filters