CSS 背景圖像的不平鋪效果是一個非常實用的實現方式，可以讓我們定制出非常獨特的頁面樣式，讓頁面看起來更加美觀和吸引人。這篇文章將向您介紹如何通過 CSS 實現背景圖像的不平鋪效果。 在 CSS 中，我們可以使用 background-image 屬性來設置背景圖像。背景圖像可以是一個 URL，也可以是一個線性漸變或者徑向漸變。默認情況下，背景圖像會鋪滿整個背景，如果我們想要實現不平鋪的效果，我們需要使用 background-repeat 屬性。 background-repeat 屬性接受以下幾個值： - repeat：背景圖像在水平和垂直方向上重復填充，直到鋪滿整個背景。 - repeat-x：背景圖像在水平方向上重復填充，垂直方向不鋪滿。 - repeat-y：背景圖像在垂直方向上重復填充，水平方向不鋪滿。 - no-repeat：背景圖像不重復，只顯示一次。 - space：背景圖像在水平和垂直方向上重復填充，但是在每個方向上都留出一定的空白區域，使得背景圖像之間可以互相分離。 - round：背景圖像在水平和垂直方向上重復填充，并且在每個方向上盡可能地充滿整個背景，背景圖像大小可能會隨之調整。 如果我們想要實現背景圖像不平鋪的效果，我們可以將 background-repeat 屬性設置為 no-repeat，這樣背景圖像就只會顯示一次，不會垂直或者水平方向上重復填充。 下面是一個示例代碼，展示了如何通過 CSS 實現背景圖像的不平鋪效果：

p{
background-image: url(../images/bg-image.jpg);
background-repeat: no-repeat;
background-size: cover;
}

在上面的代碼中，我們將 p 元素的背景圖像設置為 bg-image.jpg，將 background-repeat 屬性設置為 no-repeat，這樣背景圖像就只會顯示一次，不會垂直或者水平方向上重復填充。我們還通過 background-size 屬性將背景圖像調整到與元素大小一致，使得背景圖像可以完整地顯示出來。 總結來說，通過 background-repeat 屬性可以實現背景圖像的不平鋪效果。將 background-repeat 屬性設置為 no-repeat，背景圖像就只會顯示一次，不會垂直或者水平方向上重復填充。同時，我們還可以通過 background-size 屬性設置背景圖像的大小，使得其與元素大小一致，達到更好的顯示效果。