Question

我正在处理涉及2个背景附件实例的项目：已修复。理想情况下，我喜欢那里的第三个，但我现在已经把它关掉了，因为它太多了。

此外，我将这些背景图像设置为background-size：cover

.banner {
background-image: url('../img/background.jpg');
height: 100vh;
background-size: cover;
background-attachment: fixed; }

＆安培;

.testbackground {
background-image: url('../img/forest1.jpg');
background-size: cover;
background-attachment: fixed;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
/* will-change: transform */
/* transform: translateZ(0) */ }

我知道之前已经问过这个问题，并且我一直在努力寻找答案，但是：

使用此属性时有没有办法优化性能？问题是当向上和向下滚动时页面会变得有点紧张。

我已经使用了遗嘱改变：转换技巧，如下所示：https://www.fourkitchens.com/blog/article/fix-scrolling-performance-css-will-change-property

我还使用了transform：translateZ（0），根据我的理解，这是一种被黑客攻击的方式，可以创建相同的渲染技巧。

我注意到这两者有点不同。但最终浏览器并没有像我希望的那样顺畅顺畅。这只是使用固定资产时常年出现的问题吗？或者有没有办法让事情变得美好和顺利？

谢谢，

编辑：有趣的是，当我将浏览器调整为小尺寸（500px宽度）时，页面变得更加平滑。所以我想知道文件大小是否与它有关...也许使用像Optimizilla这样的东西来压缩图像大小会有所不同？

优化背景附件：已修复

0 个答案: