1. 程式人生 > >background-size 設定背景圖片尺寸

background-size 設定背景圖片尺寸

background-size 有三個屬性
auto :背景圖片的真實大小

cover: 背景圖片等比例縮放到鋪滿盒子

contain:背景圖片拉伸以適應盒子大小

還可以直接設定大小 backgroun-size:100% 100%; 當寫一個100%的時候只有寬適應 上下出現留白

當設定兩個100%的時候等於cover

背景重複
round 如果背景圖片在平鋪的時候 有部分割槽域被擷取 round會將圖片本身縮小 以達到完全顯示圖片的目的

space 在水平方向上和豎直方向上 能平鋪多少張圖片就平鋪多少張圖片 剩餘的空隙平均分配多背景

背景還可以設定多背景
.el {

background:

    url(img/bg1.png) no-repeat left top,

    url(img/bg2.png) no-repeat right top,

    url(img/bg3.png) no-repeat left bottom,

    url(img/bg4.png) no-repeat right bottom;

}#

或者讓背景色補全背景圖片達不到的地方

background: #ccc url(img/bg1.bng)left center;

看見方位詞想起來了 當寫一個center的時候 另一個方位詞不寫 預設是center