我有一张背景图片正在我的页面部分滚动。但是,为了相同质量的背景图像支持不同的设备屏幕,我使用了 css 属性 background-size:cover
就可以了。当我使用此属性时,唯一的问题是谷歌浏览器滞后。删除此属性会使 chrome 恢复其良好性能。
我该怎么办?我在网上搜索了这个问题,并使用 JQUERY 找到了一些解决方案。但是,如果可能的话,我想使用纯 CSS 来完成。
最佳答案
我在使用多张高分辨率图像时遇到了同样的问题,我在元素中添加了:
-webkit-transform: translate3d(0,0,0);
这不是在所有情况下都是最好的技巧,但它可以提高性能。它将使用 GPU 来处理渲染。
检查这个explanation和 this one了解更多信息。
关于html - Chrome 在使用 CSS background-size :cover in scrolling background image 时滞后,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33229840/