掌握CSS背景圖像大小和位置的技巧，輕鬆創(chuàng)建響應(yīng)式佈局！本文將深入探討background-size和background-position屬性，助您靈活控制背景圖像的尺寸和位置。

核心要點(diǎn)：

• background-size屬性用於調(diào)整背景圖像大小，支持cover、contain等關(guān)鍵詞，以及像素、em、百分比等數(shù)值單位。
• background-position屬性控制背景圖像在容器內(nèi)的位置，與background-size: cover配合使用效果最佳。
• background-position可使用關(guān)鍵詞（top、bottom、left、right、center）、長(zhǎng)度值（px、em）或百分比值，實(shí)現(xiàn)精準(zhǔn)的圖像定位。
• background-size和background-position的組合，尤其適用於響應(yīng)式佈局，應(yīng)對(duì)容器大小變化。

實(shí)戰(zhàn)演練：

我們將使用聖托里尼島伊亞的圖片（400px x 600px）進(jìn)行演示。

我們的示例中，一個(gè)300px x 200px的<div>居中顯示。 <code><div>擁有黃色背景，背景圖像位於黃色背景之上。 <p>如果直接添加背景圖像，由於圖像尺寸大於<code><div>，只會(huì)顯示圖像的一部分。 <p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173906287235522.jpg" class="lazy" alt="How to Use CSS background-size and background-position "></p> <p><code>background-size屬性將幫助我們解決這個(gè)問(wèn)題。

使用background-size設(shè)置背景尺寸：

background-size屬性提供cover和contain兩個(gè)關(guān)鍵詞，以及數(shù)值單位（px、em、%）和auto。

• background-size: contain;：圖像完整顯示，但可能不會(huì)充滿容器。

• background-size: cover;：圖像充滿容器，但可能部分圖像會(huì)被裁剪。

  

• 其他數(shù)值：使用百分比或像素值設(shè)置圖像大小，但需謹(jǐn)慎，避免圖像變形。

使用background-position設(shè)置背景圖像位置：

默認(rèn)情況下，背景圖像左上角位於容器左上角。 background-position屬性允許我們精確控製圖像位置。

• 關(guān)鍵詞：使用top、bottom、left、right、center等關(guān)鍵詞組合定位。

• 長(zhǎng)度值：使用像素、em等長(zhǎng)度值微調(diào)圖像位置。

• 百分比值：使用百分比值定位，需理解其相對(duì)容器的比例關(guān)係。

  

總結(jié)：

background-size和background-position屬性是CSS中強(qiáng)大的工具，尤其在創(chuàng)建響應(yīng)式佈局時(shí)非常實(shí)用。靈活運(yùn)用這兩個(gè)屬性，可以輕鬆實(shí)現(xiàn)各種背景圖像效果。

更多細(xì)節(jié)，請(qǐng)參考MDN文檔：background-size和background-position。 此外，建議學(xué)習(xí)object-fit和object-position屬性，它們同樣適用於內(nèi)聯(lián)圖像。

常見(jiàn)問(wèn)題解答 (FAQs)：

• 如何將背景圖像定位到頁(yè)面右下角？ 使用background-position: bottom right;。
• 可以使用百分比定位背景圖像嗎？ 可以，background-position接受百分比值。
• 如何使背景圖像覆蓋整個(gè)元素？ 使用background-size: cover;。
• background-size: cover;和background-size: contain;的區(qū)別？ cover充滿容器，contain完整顯示。
• CSS支持多張背景圖像嗎？ 支持，用逗號(hào)分隔。

希望本文能幫助您更好地理解和運(yùn)用CSS背景圖像大小和位置屬性！