Css 修复了Firefox中背景模糊，边缘有白光的问题_Css_Firefox_Background_Frontend

Css 修复了Firefox中背景模糊，边缘有白光的问题

css firefox

Css 修复了Firefox中背景模糊，边缘有白光的问题,css,firefox,background,frontend,Css,Firefox,Background,Frontend,我有一个要求，使全屏幕固定模糊的背景图像。我已经创建了一个plnkr来演示该问题：例如，在Chrome浏览器中，你应该可以看到它完全模糊，但在firefox浏览器中，边缘有一个白色的“发光”。这可能发生在Chrome中，但添加了transform:scale（1.1）解决了这个问题，但是我还没有在firefox中找到任何解决方法有趣的观察结果：如果页面是通过iframe加载的，那么它可以正常工作（因此我不能通过jsfiddle复制它），您需要单击plnkr中的openinseparat

我有一个要求，使全屏幕固定模糊的背景图像。我已经创建了一个plnkr来演示该问题：

例如，在Chrome浏览器中，你应该可以看到它完全模糊，但在firefox浏览器中，边缘有一个白色的“发光”。这可能发生在Chrome中，但添加了

transform:scale（1.1）

解决了这个问题，但是我还没有在firefox中找到任何解决方法

有趣的观察结果：

如果页面是通过iframe加载的，那么它可以正常工作（因此我不能通过jsfiddle复制它），您需要单击plnkr中的openinseparate窗口来查看它
如果背景容器不是
```
位置：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>


身体{
保证金：0；
}
.背景容器{
宽度：100%；
身高：100%；
溢出：隐藏；
位置：固定；
}
.background容器：：之后{
内容：''；
显示：块；
背景：url(https://i.picsum.photos/id/7/1920/1280.jpg?hmac=NNcES4eWRaOfNNLoWy6yOqUE3g4ZZqPsRVHwfpwjIzs)不重复50%；
背景尺寸：封面；
过滤器：模糊（10px）；
宽度：100vw；
高度：100vh；
转换：比例（1.1）；
}