CSS背景圖平鋪不拉伸 在網頁設計中，背景圖是一個非常關鍵的元素。通過設置背景圖，可以讓網站更具視覺吸引力和良好的用戶體驗。然而，有時可能會遇到背景圖拉伸了的情況，這會導致不利的效果。如何讓背景圖平鋪不拉伸，是一個比較常見的問題。下面，我們將介紹如何使用CSS來實現這個目標。 首先，讓我們來看一下使用CSS設置背景圖的基本語法。 ``` background-image: url('圖片地址'); ``` 通過這個語法，我們就可以將一張圖片設置為網頁的背景圖了。但是，這只是開始。如果我們想讓這張圖片平鋪不拉伸，還需要增加一些額外的CSS屬性。 ``` background-repeat: no-repeat; background-size: cover; ``` 其中，`background-repeat`屬性用來控制背景圖是否平鋪。如果將它設置為`no-repeat`，則表示背景圖不重復。 `background-size`屬性用來控制背景圖的大小。如果我們想讓背景圖平鋪不拉伸，可以將它設置為`cover`。這個值會使背景圖等比例地擴展，以覆蓋整個元素。 下面，我們來看一下完整的代碼示例。假設我們有一個`div`元素，寬度為400像素，高度為300像素，我們想要將一張名為`bg.jpg`的圖片設置為它的背景圖。實現這個需求的代碼如下： `````` 上面的代碼中，我們將`background-repeat`設置為`no-repeat`，意味著圖片不重復。然后，將`background-size`設置為`cover`，意味著將背景圖擴展以覆蓋整個`div`元素。 總結一下，我們可以通過設置`background-repeat`屬性為`no-repeat`，并將`background-size`屬性設置為`cover`，來讓背景圖平鋪不拉伸。當然，如果需要調整圖片的大小和位置等參數，還可以使用其他CSS屬性進行調整。