先來看w3c的background-size的幾個值:
background-size:cover; 把背景圖像擴展至足夠大,以使背景圖像完全覆蓋背景區域。背景圖像的某些部分也許無法顯示在背景定位區域中。
background-size:contain; 把圖像圖像擴展至最大尺寸,以使其寬度和高度完全適應內容區域。
在項目中經常會使用一張背景圖當作網頁背景,我一直使用的是 background-size:cover; cover這個值是使背景圖鋪滿全屏,但是背景圖片可能顯示不完全。
后來發現 background-size:100% 100%; 可以使圖片鋪滿全屏並且使背景圖片顯示完全(盪然不同屏幕下背景圖片會被拉伸或縮小),這個值相對於cover來說,更適合用來設置全屏背景,尤其是自適應寬高的網頁中。
還有個 background-size:contain; 這個就是把背景圖等比例縮放,盡量適應屏幕。