如何使用CSS背景大小和背景位置

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

核心要點：

• background-size屬性用於調整背景圖像大小，支持cover、contain等關鍵詞，以及像素、em、百分比等數值單位。
• background-position屬性控制背景圖像在容器內的位置，與background-size: cover配合使用效果最佳。
• background-position可使用關鍵詞（top、bottom、left、right、center）、長度值（px、em）或百分比值，實現精準的圖像定位。
• background-size和background-position的組合，尤其適用於響應式佈局，應對容器大小變化。

實戰演練：

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

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

使用background-size設置背景尺寸：

background-size屬性提供cover和contain兩個關鍵詞，以及數值單位（px、em、%）和auto。

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

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

  

• 其他數值：使用百分比或像素值設置圖像大小，但需謹慎，避免圖像變形。

使用background-position設置背景圖像位置：

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

• 關鍵詞：使用top、bottom、left、right、center等關鍵詞組合定位。

• 長度值：使用像素、em等長度值微調圖像位置。

• 百分比值：使用百分比值定位，需理解其相對容器的比例關係。

  

總結：

background-size和background-position屬性是CSS中強大的工具，尤其在創建響應式佈局時非常實用。靈活運用這兩個屬性，可以輕鬆實現各種背景圖像效果。

更多細節，請參考MDN文檔：background-size和background-position。 此外，建議學習object-fit和object-position屬性，它們同樣適用於內聯圖像。

常見問題解答 (FAQs)：

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

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