使用 GPU 的 CSS 全屏模糊

Question

我确实遇到了来自 this 的问题问题，但我不能发表评论(因为我的代表少于 50 个)。

这与通过 GPU 加速模糊全屏图像但不让侧面“泄漏”获得更好的性能有关。

Answer 1

如果您不介意添加额外的 div，您可以添加一个包装器并对其应用转换。我检查了 Chrome 开发工具，确实 Chrome 将包装器 #bg 渲染到了一个单独的层中，尽管这种优化是非常特定于浏览器的。我建议阅读 https://www.smashingmagazine.com/2016/12/gpu-animation-doing-it-right/

但是，我会给你另一个建议，而不是使用大图像并对其进行模糊处理，你可以使用非常低的分辨率(比如 10x10 像素)并使其全屏显示。结果几乎相同，但要加载的字节要少得多。

html {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;  
}

body {
  margin: 0;
  padding: 0;
  background: red;
  position: relative;
  width: 100%;
  min-height: 100%;
}

#bg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  transform: translate3d(0,0,0);
}

#bg > div {
    background-image:url('http://lorempixel.com/1920/1920/');
    background-size: cover;
    position: absolute;
    left: -60px;
    top: -60px;
    right: -60px;
    bottom: -60px;
    filter: blur(60px);
}

<div id="bg">
  <div></div>
</div>