CSS背景平鋪是在網頁設計中常用的一種技巧，可以讓網頁上的背景圖案或顏色在整個頁面中平鋪展示，但有時候會出現背景圖案或顏色變形的情況，這是什么原因呢？
一種可能的原因是背景圖案或顏色尺寸不夠大，無法完全覆蓋整個頁面，導致重復平鋪時出現縫隙和間隔。這種情況可以通過增大背景圖案或顏色的尺寸來避免，或者使用其他方式來填充頁面空白部分。
另外一種可能的原因是背景圖案或顏色的寬高比與頁面尺寸不一致，導致重復平鋪時出現形變和失真。這種情況可以通過調整背景圖案或顏色的寬高比，或者使用背景圖案或顏色在不同尺寸下的變化來避免。
以下是樣例代碼，使用了一個固定寬高比的背景圖案，通過背景位置和尺寸的調整來達到不同尺寸頁面下的平鋪效果。

p {
padding: 20px;
background-image: url('bg-pattern.jpg');
background-repeat: repeat;
background-position: center;
background-size: contain;
}
@media screen and (min-width: 768px) {
p {
background-size: auto 100%;
}
}
@media screen and (min-width: 992px) {
p {
background-size: auto 50%;
background-position: right;
}
}
@media screen and (min-width: 1200px) {
p {
background-size: auto 33%;
background-position: left;
}
}

在上述代碼中，p元素的背景圖案是一個背景平鋪的圖片。通過設置background-repeat屬性為repeat，可以實現在整個頁面上重復展示背景圖案。為了避免縫隙和間隔，我們可以考慮將背景圖案的寬高比固定為1:1。
在不同尺寸的頁面中，我們可以通過調整background-size和background-position屬性來實現不同的背景鋪滿效果。在大屏幕下，將背景圖案的寬度設置為頁面寬度的50%，并將背景位置調整到右邊；在更大的屏幕下，將背景圖案的寬度調整為頁面寬度的33%，并將背景位置調整到左邊。這樣我們就可以在不同尺寸的頁面中保持背景平鋪效果，并避免了變形和失真的情況。