小编Tho*_* E.的帖子

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

应用CSS3模糊后,大约有10 - 20帧/秒的下降(从60fps).

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

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

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

ps,我不介意使用javascript,jquery,css或html元素.

我有一堆CSS应用于父元素及其子元素:

.parent {
  position: fixed;
  top: 0px;
}
.el {
  position: fixed;
  top: 5px;
  z-index: 100;
}
.bodycontent {
  z-index: 1;
  position: relative;
}

<div class="parent">
  <div class="el">
    <button></button>
  </div>
</div>
<div class="bodycontent"></div>

页面是这样生成的,当它滚动时,.parent会在下面.bodycontent但是.el在它上面.这适用于我希望它在Firefox中,但不适用于Chrome.

有什么建议？我尝试过使用不同的z-index值和不同的position值而没有成功.