CSS控制背景圖大小的方法

在CSS中，我們可以使用背景尺寸屬性來(lái)控制背景圖的大小，這個(gè)屬性接受兩個(gè)值：一個(gè)是寬度，另一個(gè)是高度，如果只提供一個(gè)值，那么另一個(gè)值會(huì)自動(dòng)計(jì)算以保持原始圖像的寬高比。

如果我們有一張寬度為300像素，高度為200像素的背景圖，我們可以使用以下CSS代碼來(lái)控制其大?。?/p>

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

這樣，背景圖的大小就會(huì)被限制在300像素的寬度和200像素的高度，如果圖像的實(shí)際尺寸大于這些值，那么它會(huì)被裁剪以適應(yīng)新的大小。

我們還可以使用百分比來(lái)設(shè)置背景圖的大小，如果我們想要背景圖占據(jù)其包含元素的全部寬度和一半高度，我們可以使用以下CSS代碼：

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

這樣，背景圖就會(huì)占據(jù)其包含元素的全部寬度，并且高度會(huì)調(diào)整為原始高度的一半。

需要注意的是，如果背景圖的實(shí)際尺寸小于設(shè)置的大小，那么它會(huì)被放大以適應(yīng)新的大小，如果背景圖是一個(gè)重復(fù)圖像（如平鋪背景），那么設(shè)置的大小也會(huì)影響到圖像的重復(fù)頻率和位置。

CSS提供了豐富的背景尺寸控制方法，可以滿足各種復(fù)雜的背景圖需求。