问题描述
我正在制作一个带有模糊背景图像的大按钮，当您将鼠标悬停在该按钮上时，该按钮会变得模糊。我使用了一个隐藏溢出的容器，并将背景图像的边距设为负值，以便定义边缘。
但是，当我将鼠标悬停在图像上时，它会从模糊过渡到不模糊，反之亦然，图像的边缘不再被定义。这会产生一种效果，它下面的白色容器的边缘将是可见的。当完全模糊或完全不模糊时，这些边缘会立即重新定义。
我该如何解决这个问题？
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>解决方法
我认为这是浏览器错误。
可以在边框处看到容器背景。
如果容器背景与图像相同，则可以使其不那么明显。我在图像中使用了继承以避免将其设置在 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>该问题似乎是由 .image css 类中的负边距和 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>