Question

我需要制作全屏固定模糊背景图像。我创建了一个 plnkr 来演示这个问题： https://plnkr.co/edit/vw0CBNV0Ut8AvF5W

例如，您应该能够看到它在 Chrome 中完全模糊，但在 Firefox 中，边缘周围有白色“发光”。这可能在 Chrome 中发生，但添加 transform: scale(1.1); 可以解决它，但是我在 Firefox 中找不到任何方法来解决它。

有趣的观察：

如果页面是通过 iframe 加载的，它就可以正常工作（因此我无法通过 jsfiddle 复制它），您需要在 plnkr 中单击在单独窗口中打开才能看到它。
如果背景容器不是 position: fixed，则可以正常工作。

对 Firefox 解决方案的任何帮助将不胜感激。

从 Chrome 浏览：

从 Firefox 中查看：

完整代码如下。

<html>
<head>
<style type="text/css">
body{
  margin:0;
}

.background-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: fixed;
}
  
.background-container::after {
    content: '';
    display: block;
    background: url(https://i.picsum.photos/id/7/1920/1280.jpg?hmac=NNcES4eWRaOfNNLoWy6yOqUE3g4ZZqPsRVHwfpwjIzs) no-repeat 50%;
    background-size: cover;
    filter: blur(10px);
    width: 100vw;
    height: 100vh;
    transform: scale(1.1);
}
</style>
</head>
<body>
<div class="background-container"></div>
</body>
</html>

修复了 Firefox 中模糊的背景边缘有白光

0 个答案: