17

我使用下面的 CSS 更改了论坛的背景

http://forum.antinovaordemundial.com

html {
    background: url(http://antinovaordemmundial.com/mystuff/logo_blog.jpg) no-repeat center center fixed;
    background-image: url(http://antinovaordemmundial.com/mystuff/logo_blog.jpg);
    background-repeat-x: no-repeat;
    background-repeat-y: no-repeat;
    background-attachment: fixed;
    background-position-x: 50%;
    background-position-y: 50%;
    background-origin: initial;
    background-clip: initial;
    background-color: initial;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

图像为 1600x711 和 88k。页面的滚动现在非常慢。CSS有问题还是图像应该更小？

编辑：我尝试更改为：

body {        
    color: #000;
    font-family: Verdana, Arial, Sans-Serif;
    font-size: 13px;
    text-align: center; /* IE 5 fix */
    line-height: 1.4;
    background-attachment: fixed;
    background-clip: initial;
    background-color: #51010E;
    background-image: url(http://antinovaordemmundial.com/mystuff/logo_blog.jpg);
    background-origin: initial;
    background-position: initial initial;
    background-repeat: initial initial;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
}

但是滚动仍然很慢。

4

8 回答 8

17

我以为我会在这里做出贡献。而不是使用背景附件：固定；使用：之前和位置：固定；问题排序。我遇到了同样的问题。

在这里阅读更多：http: //fourkitchens.com/blog/article/fix-scrolling-performance-css-will-change-property

于 2016-04-14T17:02:42.620 回答
13

我遇到了同样的问题并使用这个 jQuery 插件解决了它：http: //srobbin.com/jquery-plugins/jquery-backstretch/

它不使用任何 CSS3 属性，但可以正常工作，并且在 Chrome 13 或 Firefox 6 上没有任何性能问题。

于 2011-08-31T16:31:33.477 回答
6

当我移除该background-size属性时，问题就消失了。我认为这是导致问题的大图像的缩放。如果这不起作用，只需完全删除背景图像。但是，我以前从未听说过大型背景图像会导致延迟。

于 2011-08-12T01:31:54.440 回答
2

如果您将其更改为 background-attachment: scroll 对于移动设备，则问题实际上与 background-attachment 固定值有关，它应该修复滞后。

于 2018-02-19T18:04:03.950 回答
0

此外，将以下样式应用于html标签可显着提高 WebKit 浏览器（包括 Chrome）中的帧速率：

-webkit-transform: translate3d(0,0,0);

据我所知，这适用于（大）背景照片和不连贯的滚动的所有情况。

于 2017-01-23T14:32:44.777 回答
0

压缩图像（减小尺寸），解决了我的问题，我强烈建议使用像Radical Image Optimization Tool (RIOT)这样的工具，非常有效且简单。

在 linux 上，这可以使用GIMP完成，您也可以删除图像的元数据以减小大小，使用exiftool之类的工具。

于 2017-07-09T06:41:30.437 回答
0

在遇到相同问题时，将图像文件类型更改为 SVG 显着提高了我网站的性能！

于 2020-05-19T09:39:33.620 回答
0

在固定附件的情况下使背景大小99.9%不或覆盖100%

background-size : 99.9%;
于 2021-06-11T18:54:01.253 回答