background-size 是 CSS 中一個(gè)非常重要的屬性，用于控制元素背景圖片的尺寸。通過(guò)設(shè)置 background-size，開發(fā)者可以根據(jù)布局需求，靈活地調(diào)整背景圖像的大小，創(chuàng)造出更加豐富和美觀的頁(yè)面效果。

一、background-size 屬性概述

1. 屬性簡(jiǎn)介

background-size 屬性允許你定義背景圖片的大小，以適應(yīng)元素的尺寸和頁(yè)面布局。該屬性能夠通過(guò)多種方式設(shè)定背景圖像的縮放比例，提供了從完全覆蓋到按比例縮放的多種方案。

background-size 可以接受以下幾種值：

• auto：默認(rèn)值，保持背景圖片的原始大小。
• cover：背景圖片將被縮放到足夠大，以完全覆蓋元素的背景區(qū)域，即使圖片會(huì)被裁剪。
• contain：背景圖片將被縮放到足夠小，以完整顯示在元素背景中，且不會(huì)被裁剪。
• 指定尺寸：你可以直接設(shè)定背景圖片的寬度和高度，如 100px 200px 或 50% 50%，甚至還支持 calc() 函數(shù)進(jìn)行動(dòng)態(tài)計(jì)算。

二、background-size 屬性的基本用法

下面我們來(lái)看幾個(gè)基本的使用案例：

1. 使用 auto 保持原始大小

.example-auto {
  background-image: url('image.jpg');
  background-size: auto;
}

在這個(gè)例子中，背景圖片的大小保持其原始尺寸，圖片既不會(huì)縮放也不會(huì)拉伸，直接根據(jù)圖片的實(shí)際大小顯示。

2. 使用 cover 完全覆蓋背景

.example-cover {
  background-image: url('image.jpg');
  background-size: cover;
}

cover 值會(huì)將背景圖片縮放到足夠大，以確保它能夠覆蓋整個(gè)元素背景。如果背景圖片的比例與元素不同，部分圖片可能會(huì)被裁剪。

3. 使用 contain 適應(yīng)背景

.example-contain {
  background-image: url('image.jpg');
  background-size: contain;
}

與 cover 不同，contain 值會(huì)確保整個(gè)背景圖片都顯示在元素背景中，圖片不會(huì)被裁剪，但這可能導(dǎo)致元素中留有空白區(qū)域。

4. 使用百分比或具體尺寸

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

這里，背景圖片的寬度和高度分別設(shè)定為元素尺寸的 50%，即使圖片的比例與元素不匹配，仍會(huì)按比例縮放。

三、background-size 的詳細(xì)解析

1. auto 的詳細(xì)解釋

當(dāng)使用 auto 時(shí)，背景圖片的尺寸不會(huì)被改變。即便容器的大小發(fā)生變化，背景圖片也不會(huì)跟隨改變。因此，auto 更適合用于設(shè)計(jì)中背景圖片尺寸精確控制的場(chǎng)景，尤其是那些需要背景與實(shí)際內(nèi)容比例保持一致的布局。

2. cover 與 contain 的比較

• cover：使用 cover 值時(shí)，背景圖片會(huì)被放大或縮小，確保元素的背景被圖片完全填充。但由于圖片會(huì)根據(jù)容器比例進(jìn)行調(diào)整，可能會(huì)有部分被裁剪。通常用于全屏或全區(qū)域背景圖的應(yīng)用場(chǎng)景。
• contain：相比之下，contain 則保證背景圖片不會(huì)被裁剪，所有內(nèi)容都顯示出來(lái)。然而，它不會(huì)保證圖片能完全覆蓋整個(gè)背景區(qū)域，可能會(huì)有部分區(qū)域留空，適合那些需要展示整個(gè)圖片的場(chǎng)景。

3. 指定寬度和高度

除了 auto、cover 和 contain 之外，還可以直接為 background-size 指定具體的尺寸，既可以是絕對(duì)值如 px，也可以是相對(duì)值如百分比。

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

在這個(gè)例子中，背景圖片被縮放到寬度 100px、高度 200px。使用固定尺寸時(shí)，確保圖片比例不會(huì)失真是一個(gè)設(shè)計(jì)難點(diǎn)。

4. 動(dòng)態(tài)尺寸計(jì)算

在某些復(fù)雜布局中，可能需要根據(jù)元素或屏幕的大小動(dòng)態(tài)調(diào)整背景圖片的尺寸，calc() 函數(shù)能夠很好地解決這個(gè)問(wèn)題：

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

這里，背景圖片的寬度和高度會(huì)分別減去 20px 和 50px，這種動(dòng)態(tài)計(jì)算的方式非常適合響應(yīng)式布局。

四、響應(yīng)式設(shè)計(jì)中的應(yīng)用

1. 使用 cover 實(shí)現(xiàn)自適應(yīng)背景

在響應(yīng)式設(shè)計(jì)中，背景圖片的尺寸必須隨屏幕的變化而自動(dòng)調(diào)整，而 cover 是實(shí)現(xiàn)這一效果的常用方法。無(wú)論屏幕尺寸如何變化，背景圖片總是能夠全屏覆蓋，而不會(huì)失去主要內(nèi)容。

.example-responsive {
  background-image: url('responsive-bg.jpg');
  background-size: cover;
}

這種方式常用于設(shè)計(jì)全屏展示圖片的場(chǎng)景，特別是在著重視覺效果的網(wǎng)站中。

2. 使用 contain 保證圖片完整顯示

當(dāng)你希望背景圖片完整顯示在不同設(shè)備上時(shí)，contain 是更好的選擇。它不會(huì)裁剪圖片，而是根據(jù)屏幕尺寸進(jìn)行縮放，以保證圖片內(nèi)容的完整性。

.example-responsive-contain {
  background-image: url('responsive-bg.jpg');
  background-size: contain;
}

這在展示品牌標(biāo)志或產(chǎn)品圖片時(shí)非常有用，因?yàn)椴眉艨赡軙?huì)影響圖片內(nèi)容的呈現(xiàn)效果。

五、多個(gè)背景圖片的使用

CSS 支持為一個(gè)元素設(shè)置多個(gè)背景圖片，每個(gè)背景圖片都可以單獨(dú)設(shè)置 background-size。例如：

.example-multiple {
  background-image: url('image1.jpg'), url('image2.jpg');
  background-size: 50% 50%, auto;
}

在這個(gè)例子中，第一張圖片被設(shè)置為元素的一半大小，而第二張圖片保持原始尺寸。

六、background-size 與其他屬性的配合

1. 與 background-position 的配合

通過(guò) background-position，你可以精確控制背景圖片在元素中的位置。當(dāng)與 background-size 結(jié)合使用時(shí)，能夠創(chuàng)建出精美的背景效果。

.example-position {
  background-image: url('image.jpg');
  background-size: cover;
  background-position: center center;
}

這種組合常用于大尺寸圖片的全屏背景展示，通過(guò)居中對(duì)齊確保圖片的主體部分始終可見。

2. 與 background-repeat 的配合

background-size 還可以與 background-repeat 配合使用，控制圖片是否重復(fù)顯示：

.example-repeat {
  background-image: url('image.jpg');
  background-size: 100px 100px;
  background-repeat: repeat-x;
}

這里，背景圖片會(huì)在水平方向重復(fù)，而不會(huì)垂直重復(fù)。

七、注意事項(xiàng)

1. 圖片比例的影響

當(dāng)使用 background-size 設(shè)置背景圖片的大小時(shí)，確保圖片的寬高比例不會(huì)被破壞。如果圖片的寬度和高度不成比例，可能會(huì)導(dǎo)致圖片拉伸或壓縮。

2. 性能影響

使用過(guò)大的圖片會(huì)影響頁(yè)面加載性能，尤其是在使用 cover 時(shí)。為保證頁(yè)面性能，應(yīng)根據(jù)具體需求選擇合適的圖片尺寸。

八、總結(jié)

background-size 屬性為開發(fā)者提供了強(qiáng)大的背景圖像控制能力。在實(shí)際開發(fā)中，靈活使用該屬性能夠極大地提升頁(yè)面的視覺效果和用戶體驗(yàn)。通過(guò)合理的設(shè)置背景圖片的大小，開發(fā)者可以確保圖片在各種屏幕設(shè)備上都能夠以最佳狀態(tài)呈現(xiàn)，從而創(chuàng)造出更加精致的用戶界面。

推薦資料：

• JavaScript
• react
• vue

到此這篇關(guān)于CSS background-size 屬性詳解的文章就介紹到這了,更多相關(guān)CSS background-size 屬性內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

最新評(píng)論