在網頁制作中，圖片的使用是非常重要的一環。有時候，我們需要在網頁中平鋪一張背景圖片，但是當圖片尺寸較小，而網頁寬度較大時，就會出現圖片被拉伸變形的情況，這是非常影響美觀的。那么，如何才能讓平鋪的圖片不失真呢？下面，本文將為大家介紹幾種解決方法。

1.使用背景定位

.bg{
background-image: url('background.jpg')
background-repeat: repeat;
background-position: center;
background-size: cover;
}

這里使用了background-position屬性，將圖片定位到了頁面的中心，然后使用了background-size: cover來讓圖片在保持比例的情況下，盡可能的填充整個屏幕。這種方法適用于圖片比較大且希望填充整個屏幕的情況。

2.使用背景剪切

.bg{
background-image: url('background.jpg')
background-repeat: repeat;
background-position: center;
background-clip: content-box;
}

這里使用了background-clip屬性來指定圖片的剪切區域為內容區域，這樣就可以避免圖片因被拉伸而失真了。同樣的，建議在使用該方法時，盡可能使用大尺寸的圖片來保證效果。

3.使用多張圖片實現

.bg{
background-image: url('background_top.jpg'), url('background_bottom.jpg');
background-repeat: no-repeat, repeat-y;
background-position: top center, bottom center;
}

這種方法比較適用于背景圖紋理重復的情況。它通過將圖片分成多張，在不同的位置上進行平鋪，從而達到不失真的效果。但是這種方法需要使用多張圖片，會增加網頁的加載時間，因此需要慎重使用。

以上就是關于CSS平鋪圖片不失真的幾種實現方法，根據實際需求選擇需要的方法即可。