使用響應式設計管理背景圖像的最佳方法？

在使用不可變形背景圖像的網站上，在所有設備/所有變焦範圍內使其看起來更好的最佳方式是什麼？使用響應式設計管理背景圖像的最佳方法？

該CSS爲

background：#aaa url（// url）;

因此，在圖像結束的地方使用背景顏色。

我最初的想法是給背景圖像100％的大小，所以無論縮放或視口大小，背景圖像永遠不會失去質量。

這是一個很好的方法來做到這一點，或者有更好的方式來管理響應式設計中的背景圖片嗎？

感謝

來源

2014-04-05 user3501909

我推薦這

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; 
}

來源：CSS-Tricks: Perfect Full Page Background Image

來源

2014-04-05 18:47:43

謝謝你，看起來不錯。 – user3501909

順便說一句dwreck08，在較大的屏幕上顯然背景圖像會失去質量，您有什麼建議？大圖像分辨率？什麼樣的尺寸最好？有任何想法嗎？ – user3501909

使用響應式設計管理背景圖像的最佳方法？

回答

相關問題