波涛汹涌的滚动谷歌浏览器，由于宽度：100％属性

我使用的是不同的背景图片在我的网站的每个页面使用的HTML如下：波涛汹涌的滚动谷歌浏览器，由于宽度：100％属性

<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%？

来源

2013-05-09 wtmcm

我会完全改变整个页面背景的方法。有比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; 
}

你可以阅读更多关于全页面背景here。

来源

2013-05-09 23:41:37 Nobita

感谢您的建议，我结束了使用这个jQuery插件。它工作得很好。 http://www.htmldrive.net/items/demo/425/jQuery-Easy-Background-Resize – wtmcm 2013-05-10 16:12:19

这些天，all modern browsers supporting it，我会建议使用背景图片来代替，并使用这样的事情：

background-size: cover;

这将宽保持背景图像<body>元素作为画面。（对于较老的dodo浏览器，您可以将其居中。）

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

来源

2013-05-09 23:39:43

波涛汹涌的滚动谷歌浏览器，由于宽度：100％属性

回答

相关问题