在CSS中,可以使用背景尺寸屬性(background-size)來(lái)控制背景圖的大小,這個(gè)屬性可以設(shè)置為自動(dòng)(auto)或者具體的寬度和高度,如果想要將背景圖變小,可以將背景尺寸屬性設(shè)置為一個(gè)比原圖尺寸更小的值。
假設(shè)你的背景圖尺寸為800px600px,但你想將其縮小到400px * 300px,那么你可以這樣寫CSS代碼
body { background-image: url('your-image-url'); background-size: 400px 300px; }
這樣,背景圖就會(huì)被縮小到400px * 300px的尺寸,注意,如果原圖的長(zhǎng)寬比與設(shè)置的長(zhǎng)寬比不一致,那么可能會(huì)出現(xiàn)裁剪或者拉伸的情況,在設(shè)置背景尺寸時(shí),***好保證原圖的長(zhǎng)寬比與設(shè)置的長(zhǎng)寬比一致。
如果你想要讓背景圖始終保持在容器內(nèi)部,而不被拉伸或者裁剪,那么可以使用背景重復(fù)屬性(background-repeat)來(lái)控制,設(shè)置background-repeat: no-repeat;可以讓背景圖始終保持在容器的中心位置,而不被拉伸或者裁剪。
通過(guò)調(diào)整背景尺寸和背景重復(fù)屬性,可以在CSS中輕松實(shí)現(xiàn)背景圖的大小控制。