CSS：靜態背景圖像覆蓋任何屏幕大小但不超過圖像大小

我想創建一個完美的完整背景圖像，它是靜態的，並且填充視口，無論屏幕（視口）的大小如何。CSS：靜態背景圖像覆蓋任何屏幕大小但不超過圖像大小

所以我用下面的CSS：

body, html{ 
    width: 100%; 
    height: 100%; 
    background: url('http://ns223506.ovh.net/rozne/d4857d4e0f68027e7af6b70d5488b7e6/wallpaper-751328.jpg') no-repeat center center fixed; 
    margin: 0; 
    padding: 0; 
    -webkit-background-size: cover; 
     -moz-background-size: cover; 
     -o-background-size: cover; 
      background-size: cover; 
}

現在問題......據我瞭解，當視大小超過了圖像的大小，圖像將伸展，將像素化。 ..

如何防止最大尺寸被傳遞？

此外，當您想要迎合視網膜顯示器分辨率時，處理此屏幕尺寸問題的最佳方法是什麼？在body，html元素上設置最大寬度？

謝謝

來源

2013-05-31 DextrousDave

您可以使用@media查詢來決定，直到你想要的圖像覆蓋整個頁面，如果分辨率變大了什麼樣的分辨率，無論是與另一個圖像取代它，或者乾脆使用center值background position和background color，如果你並不想掩蓋某些分辨率後的圖像，這將防止圖像獲得pixelat。例如

Demo（調整了預期的效果小提琴窗口）

html, body { 
    height: 100%; 
    width: 100%; 
} 

body { 
    background-image: url('https://fbcdn-sphotos-h-a.akamaihd.net/hphotos-ak-frc1/p480x480/1231_381212385330183_1145397211_n.jpg'); 
    /* If it exceeds 699px width, you can also replace the image here... */ 
    -webkit-background-size: cover; 
     -moz-background-size: cover; 
     -o-background-size: cover; 
      background-size: cover; 
} 

@media all and (max-width: 699px) { 
    body { 
     background-color: #000; 
     background-image: url('https://fbcdn-sphotos-h-a.akamaihd.net/hphotos-ak-frc1/p480x480/1231_381212385330183_1145397211_n.jpg'); 
     background-size: 200px 200px; 
     background-repeat: no-repeat; 
     background-position: center center; 
    } 
}

注：我用@media all and (max-width: 699px)和background-size: 200px 200px這裏在這個例子中只是爲了演示的目的，你可以用圖像的原始高度/寬度和所需的分辨率替換此爲@media規則

來源

2013-05-31 11:44:29

很酷，謝謝。我有點朝着同一個方向思考......只是不確定是否有另一種方式可以做到這一點。 – DextrousDave

@DextrousDave歡迎:) –

CSS：靜態背景圖像覆蓋任何屏幕大小但不超過圖像大小

回答

相關問題