分类导航

程序问答发布时间：2022-06-02 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了修复了 Firefox 中模糊的背景边缘有白光，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决修复了 Firefox 中模糊的背景边缘有白光？

开发过程中遇到修复了 Firefox 中模糊的背景边缘有白光的问题如何解决？下面主要结合日常开发的经验，给出你关于修复了 Firefox 中模糊的背景边缘有白光的解决方法建议，希望对你解决修复了 Firefox 中模糊的背景边缘有白光有所启发或帮助；

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

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

有趣的观察：

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

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

从 Chrome 浏览：

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

从 firefox 中查看：

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

完整代码如下。

<HTML>
<@R_301_6882@>
<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>
</@R_301_6882@>
<body>
<div class="BACkground-container"></div>
</body>
</HTML>