在CSS中,可以使用background-size
屬性來設(shè)置背景圖片的大小,這個(gè)屬性接受兩個(gè)值,分別是水平和垂直方向的尺寸,如果你想將背景圖片設(shè)置為寬度為200像素,高度為100像素,可以這樣寫:
div { background-image: url('path/to/image.jpg'); background-size: 200px 100px; }
如果你想將背景圖片設(shè)置為寬度為100%,高度為50%,可以這樣寫:
div { background-image: url('path/to/image.jpg'); background-size: 100% 50%; }
如果你想將背景圖片設(shè)置為寬度為auto,高度為200px,可以這樣寫:
div { background-image: url('path/to/image.jpg'); background-size: auto 200px; }
如果背景圖片的長(zhǎng)寬比與元素的寬高比不匹配,圖片可能會(huì)被拉伸或壓縮,為了避免這種情況,可以使用background-repeat
屬性來設(shè)置圖片的重復(fù)方式,例如repeat-x
、repeat-y
或no-repeat
。
div { background-image: url('path/to/image.jpg'); background-size: 200px 100px; background-repeat: no-repeat; }
這樣設(shè)置后,背景圖片就不會(huì)被拉伸或壓縮了。