html - CSS 模糊视频的性能和浏览器支持注意事项

Question

我目前正在开发一个网站，该网站的要求是使用 css ( like this codepen ) 包含全尺寸模糊背景视频:

.video-back {
  -webkit-filter: blur(15px);
  -moz-filter: blur(15px);
  -o-filter: blur(15px);
  -ms-filter: blur(15px);
  filter: blur(15px);
}

我已经在现代浏览器上测试过它，它看起来像现代 FF、Chrome、Opera 和 Safari 上的模糊功能。我会将视频优雅地降级为适用于平板电脑、移动设备和 IE 的大型启动图像。

我的主要问题是:是否还有其他我可能遗漏的因素？计算机内存或图形处理能力？旧版本的浏览器仍然很常见？

谢谢

Answer 1

这个链接可以帮到你!此页面使用一些过滤器进行基准测试，并查看使用和不使用过滤器模糊时的性能

http://blog.kaelig.fr/post/47025488367/css-filters-in-the-real-world