background-size屬性的幾個實用的值


先來看w3c的background-size的幾個值:

 background-size:cover;    把背景圖像擴展至足夠大,以使背景圖像完全覆蓋背景區域。背景圖像的某些部分也許無法顯示在背景定位區域中。

 background-size:contain;  把圖像圖像擴展至最大尺寸,以使其寬度和高度完全適應內容區域。

在項目中經常會使用一張背景圖當作網頁背景,我一直使用的是 background-size:cover; cover這個值是使背景圖鋪滿全屏,但是背景圖片可能顯示不完全。

后來發現 background-size:100% 100%;  可以使圖片鋪滿全屏並且使背景圖片顯示完全(盪然不同屏幕下背景圖片會被拉伸或縮小),這個值相對於cover來說,更適合用來設置全屏背景,尤其是自適應寬高的網頁中。

還有個 background-size:contain;  這個就是把背景圖等比例縮放,盡量適應屏幕。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM