background-size:contain;

　　contain:包含

　　按比例調整圖片，使得圖片的寬度自適應容器的寬度。

　　相當于在ps中，約束比例設置原始圖片的寬度值等于容器的寬度值。

　　如果圖片過大，等比壓縮后容器的高度方向上可能會有空白。

　　

?

　　

background-size:cover;

　　cover:覆蓋

　　相當于ps中，約束比例設置原始圖片的高度等于容器的高度。

　　得到的圖片的寬度可能會大于容器的寬度，頁面顯示的時候會隱藏超出寬度部分。

　　

background-size:100% 100%;

　　參數一：寬度值 百分比/固定值

　　參數二：高度值 百分比/固定值

　　相當于ps中，不約束比例設置原始圖片高度等于容器高度，寬度等于容器寬度后得到的圖片

　　可能出現的情況：圖片壓縮嚴重

　　

background-size:inherit;

　　inherit:繼承

　　不對原始圖片進行任何處理，多余的進行隱藏。

　　

轉載于:https://www.cnblogs.com/wxiaona/p/6282399.html

總結

以上是生活随笔為你收集整理的background-size的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。