CSS背景圖大小設(shè)置詳解

在CSS中，我們可以使用background-size屬性來設(shè)置背景圖的大小，這個(gè)屬性接受兩個(gè)值，分別是水平和垂直方向上的尺寸，我們可以使用像素、百分比、em等單位來指定這些尺寸。

示例1：使用像素設(shè)置背景圖大小

div {
  background-image: url('example.jpg');
  background-size: 200px 300px;
}

在這個(gè)例子中，背景圖的寬度被設(shè)置為200像素，高度為300像素。

示例2：使用百分比設(shè)置背景圖大小

div {
  background-image: url('example.jpg');
  background-size: 50% 100%;
}

在這個(gè)例子中，背景圖的寬度被設(shè)置為容器寬度的50%，高度為容器高度的100%。

示例3：使用em單位設(shè)置背景圖大小

div {
  background-image: url('example.jpg');
  background-size: 2em 3em;
}

在這個(gè)例子中，背景圖的寬度被設(shè)置為2em，高度為3em，em單位會根據(jù)容器的字體大小來計(jì)算。

示例4：只設(shè)置一個(gè)值，等比例縮放背景圖

div {
  background-image: url('example.jpg');
  background-size: 200px;
}

在這個(gè)例子中，我們只設(shè)置了一個(gè)值，CSS會等比例縮放背景圖，保持其寬高比不變。

注意點(diǎn)：

1、瀏覽器兼容性：background-size屬性在大多數(shù)現(xiàn)代瀏覽器中都有很好的支持，但在一些較老的瀏覽器版本中可能不適用，確保在使用之前檢查瀏覽器的兼容性。

2、性能考慮：設(shè)置較大的背景圖可能會影響頁面的加載速度和性能，確保優(yōu)化圖片尺寸和分辨率，以提高用戶體驗(yàn)和頁面性能。