0

我使用下面的 HTML 为我网站上的每个页面使用不同的背景图像：

<div class="bg_img">
<img src="images/bg1.jpg" alt="background" />
</div>

在 IE 和 Firefox 中使用该站点时没有问题，但在 Chrome 中使用时，滚动时会出现断断续续/滞后的效果。

我意识到，当我删除该width:100%属性时，延迟会停止，但我需要它来缩放背景图像。

.bg_img img{
width:100%;  <---- PROBLEM
position:fixed;
top:0px;
left:0px;
z-index:-1;
}

有什么我可以做的width:100%吗？

4

2 回答 2

1

我会完全改变整个页面背景的方法。除了设置 100% 之外，还有更好的解决方案，这最终会导致错误的图像比例。这是您可以尝试的一种方法。

.bg_img img{
  background: url(bg_img.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
     -moz-background-size: cover;
       -o-background-size: cover;
          background-size: cover;
}

您可以在此处阅读有关整页背景的更多信息。

于 2013-05-09T23:41:37.830 回答
0

这些天来，所有现代浏览器都支持它，我建议改用背景图像，并使用如下内容：

background-size: cover;

这将使<body>元素上的背景图像与屏幕一样宽。（对于较旧的 dodo 浏览器，您可以将其居中。）

除了 之外还有其他选项cover，但我怀疑这对您最有效。

于 2013-05-09T23:39:43.220 回答