Question

我正在创建一个网站，其中包含带有背景和CSS3模糊的:: after元素。我注意到应用CSS3模糊会对性能产生巨大的不利影响。

应用了CSS3模糊，大约有10 - 20帧/秒的下降（从60fps）。

我使用CSS3滤镜应用模糊的原因是因为这是应用于我想要模糊的图像的通用代码，即我不想使用图像编辑器手动模糊图像。

.blur::after {
    background-image:url(dog.png);
    filter:blur(3px);
}

所以，我的问题是，是否有使用过滤器的替代方法：在不使用图像编辑器的情况下模糊具有更好性能的元素及其背景？

PS，我不介意使用javascript，jquery，css或html元素。

Answer 1

@ ericjbasti的评论很有用：

我添加了

g++ -std=c++11 test1.cpp -larmadillo

然后是scss，

<canvas id="myFogCanvas"></canvas>

然后在js

.canvaswrapper{position: relative;}

#myFogCanvas{
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
}

然后我能够使用动画@keyframes为css中的.canvaswrapper div设置动画。你可以使用var image = new Image（）;在画布上，然后模糊它。

表现比使用CSS中的模糊效果好WAAAYYYY，尤其是动画效果。

CSS模糊滤镜性能

1 个答案: