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%;
}

我还尝试了后台位置：已修复，但它不仅适用于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;
}

适用于：

Safari 3 +
Chrome无论如何+
IE 9 +
Opera 10+（Opera 9.5支持背景大小但不支持关键字）
Firefox 3.6+（Firefox 4支持非供应商前缀版本）

根据here回答。

Answer 2

尝试将最小高度添加到百分之百到html和body
和背景大小属性覆盖

Answer 3

实现这一目标的方法很多，但您可以尝试：

body,html{
background-image: url(../_images/1902974.jpg);
background-size:cover
}

向下滚动后，背景图像在Chrome中消失了

3 个答案: