在CSS中,可以通過background-size屬性來設(shè)置元素的背景大小,可以對背景圖片進(jìn)行縮放或裁剪,以適應(yīng)不同尺寸的元素。
background-size: 大小值; background-size: 寬度值 高度值; background-size: 百分比; background-size: auto; background-size: cover; background-size: contain;
其中,大小值可以使用長度單位(如像素px、百分比%等)或關(guān)鍵字來指定背景圖的寬度和高度。
如果只設(shè)置一個長度值,則另一個值會與原始比例相同自動計(jì)算,而百分比則是相對于元素本身的尺寸計(jì)算。
其中,auto
表示保持圖像的原始大小,cover
表示保持圖像寬高比并將其縮放以填充整個元素,contain
則表示保持圖像的寬高比并將其縮放以完全包含整個元素。
例如,可以通過以下代碼設(shè)置一個元素的背景圖片大小:
div { background-image: url("bg.jpg"); background-size: 100px 200px; }
表示設(shè)置背景圖片寬度為100像素,高度為200像素,如果只設(shè)置一個值則另一個值會按比例自動計(jì)算。