javascript - 我的 'body' css 背景图片在 chrome 中跳跃

Question

我有一个正在开发的 joomla 网站。我的正文标签有图像背景。当我在谷歌浏览器上重新加载一个页面或导航到另一个页面时，我的主要 html 首先被加载，然后添加 body 标签的背景图像。因此，在每次重新加载时，您都会看到跳跃(或者更确切地说，就像 LED 灯亮起和熄灭)效果，因为首先您会看到带有默认背景颜色的 body 标签，然后添加了背景图像。当然它发生得非常快，但我想解决这个问题。 我知道在页面中加载 HTML 元素的顺序在 Chrome 和 Mozilla Firefox 上是不同的。那么如何在谷歌浏览器上解决这个问题呢？!

我的CSS:

html {
    height: 100%;
    margin-bottom: 0.01em;
}    
html, body, div.MainWrapper {
    background:url('../images/common/bg.jpg') transparent repeat-x scroll center top;
}

Answer 1

只适用于 body

body {
    background:url('../images/common/bg.jpg') transparent repeat-x scroll center top;
    background-attachment: fixed;
}