background-size 設定背景圖片尺寸
阿新 • • 發佈:2018-12-21
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