html - 向下滚动后背景图像在 Chrome 中消失

Question

我已将分辨率为 1980 x 1200 的图像设置为网页背景。当我向下滚动时(我认为在 1200 像素的高度之后)图像就消失了并且出现了白色背景。这只发生在 Chrome 中，在 safari 中它完美无缺。这是我在 CSS 中使用的内容

body,html{
margin-top: 0px;
background-image: url(../_images/1902974.jpg);

background-attachment: fixed;
background-position: center top;
width:100%;
height:100%;
}

我也试过 background-position:fixed 但它不仅仅适用于 Chrome。我需要添加任何代码吗？

Answer 1

全屏背景的简单方法。 (BG 图像不会像这样滚动)。如果您希望它滚动，则将 fixed 设置为 scroll。

CSS

html { 
  background: url(images/mybgimage.jpg) no-repeat center center;
  background-attachment: fixed; /* Or scroll */
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

工作于:

1. Safari 3+

2. Chrome Whatever+

3. IE 9+

4. Opera 10+(Opera 9.5 支持背景大小但不支持关键字)

5. Firefox 3.6+(Firefox 4 支持无厂商前缀版本)

根据 here 回答.