如何保持頁面背景圖像縮放固定？ CSS

我知道如何設置頁面背景等;如何保持頁面背景圖像縮放固定？ CSS

body{ 
    background-color: blue; 
    background-image: url(imagename.ext); 
    background-repeat: no-repeat; 
    background-position: left; 
}

該網頁可以放大。使用瀏覽器，用戶可以放大和縮小。但背景圖片可能無法放大或縮小。它可以保持原樣，默認大小。這可能嗎？

來源

2013-08-22 blasteralfred Ψ

html { 
    background: url(images/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
}

來源

2013-08-22 12:06:32 Anup

複製/從第一個答案的鏈接粘貼... – SeinopSys

第一個答案是不完美的形式，你可以看到有，但是它的鏈接是非常有用和完善，就是這樣。只是爲了獲得幫助，併爲需要解決方案的人員提供便利。你有任何其他方式，那麼你也可以粘貼 – Anup

您可以使用CSS：

background-size: cover;

教程：http://css-tricks.com/perfect-full-page-background-image/

來源

2013-08-22 12:02:23

小無關的問題，但可能幫助別人。我將使用像這樣的http://srobbin.com/jquery-plugins/backstretch/這樣的jquery插件。

我一直有速度問題通過CSS爲整版靜態背景（如阿努普Jangid的答案）。它使頁面的滾動非常緩慢和呆板。

來源

2013-08-22 12:26:16 Ankit

我不認爲有一種天然的清潔方式來實現你的要求。這種方法應該可以工作，但是在瀏覽器放大之後，隨着尺寸的調整，您可能會獲得一些（可能可以接受的）閃爍。

指定background-size：widthpx heightpx，當瀏覽器縮放時需要檢測縮放比例（請參見How to detect page zoom level in all modern browsers?），並相應地設置背景圖像的寬度px和高度px。

來源

2013-08-22 13:09:45 guymid

如何保持頁面背景圖像縮放固定？ CSS

回答

相關問題