波濤洶涌的滾動谷歌瀏覽器，由於寬度：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％屬性

回答

相關問題