CSS中可以使用background-size
屬性來(lái)放大背景圖片,該屬性可以指定背景圖片的寬度和高度,或者只指定一個(gè)值,另一個(gè)值會(huì)自動(dòng)縮放以保持原始圖片的寬高比。
要將背景圖片放大到原來(lái)的2倍,可以使用以下CSS代碼:
body { background-image: url('path/to/your/image.jpg'); background-size: 200% 200%; }
上述代碼會(huì)將背景圖片放大到原來(lái)的2倍,并保持原始圖片的寬高比,如果只想放大寬度或高度,可以將另一個(gè)值設(shè)置為auto
:
body { background-image: url('path/to/your/image.jpg'); background-size: 200% auto; }
上述代碼會(huì)將背景圖片的寬度放大到原來(lái)的2倍,高度則會(huì)自動(dòng)縮放以保持原始圖片的寬高比。
需要注意的是,如果背景圖片本身就有寬度和高度,那么background-size
屬性會(huì)按照?qǐng)D片本身的寬高比進(jìn)行縮放,如果想要完全覆蓋背景區(qū)域,可以使用cover
關(guān)鍵字:
body { background-image: url('path/to/your/image.jpg'); background-size: cover; }
上述代碼會(huì)將背景圖片放大到完全覆蓋背景區(qū)域,但可能會(huì)裁剪一部分圖片以保持寬高比。