时间戳

首页 > 解决方案 > CSS 定义的带有模糊过渡的边缘

html - CSS 定义的带有模糊过渡的边缘

问题描述

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

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

我怎样才能解决这个问题？

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>

标签： htmlcsscss-transitionscss-filters

解决方案

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

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

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

推荐阅读