background-size: [ <length> | <percentage> | auto ]{1, 2} | cover | contain
定義背景圖片的尺寸
初始值為auto auto
如果不設(shè)置此屬性,則圖片不會進(jìn)行拉伸與收縮,會按初始尺寸渲染.(超出繪制區(qū)域不顯示, 小于繪制區(qū)域則默認(rèn)會repeat)
一個(gè)例子:
.demo {
width: 400px;
height: 200px;
background-color:aqua;
background-image: url(./dog.jpg);
background-repeat: no-repeat;
background-size: 200px auto;
}
image.png
如果只定義一個(gè)值,則表示圖片的寬,第二個(gè)值為auto(等比縮放)
cover | contain均是將圖片進(jìn)行等比縮放,而判斷縮放結(jié)束的基準(zhǔn)不同:cover將背景圖像等比縮放到完全覆蓋容器(寬或高有可能會超出容器)contain將背景圖像的寬或高等比縮放到容器內(nèi)(背景圖像始終被包含在容器內(nèi))一個(gè)例子:
.demo {
width: 400px;
height: 200px;
background-color:aqua;
background-image: url(./dog.jpg);
background-repeat: no-repeat;
background-size: contain;
}
image.png
background-position: <percentage> | <length> | center | left | right | top | bottom
初始值: left top (0% 0%)
background-position定位背景圖片的初始位置
一個(gè)比較復(fù)雜的例子:
width: 100px;
height: 100px;
padding: 20px;
border: 20px dashed antiquewhite;
background-image: url(./dog.jpg);
background-repeat: no-repeat;
background-clip: padding-box;
background-origin: content-box;
background-size: 140px 120px;
background-position: left bottom 0px;
image.png
這個(gè)屬性是相對于
background-origin來定義初始位置的
- 數(shù)值可以為負(fù)
- 如果只提供一個(gè)，該值將用于橫坐標(biāo)；縱坐標(biāo)將默認(rèn)為50%（即center）
- 可以提供三或四個(gè)參數(shù)
