CSS是我們前端工程師必備的功夫之一，如何讓我們的頁面看起來舒服美觀呢？通常是從布局和圖片這兩方面入手。在使用圖片時，我們可能會遇到一個問題，就是圖片重復顯示。那么，怎么清除圖片重復呢？接下來，就由我來一步一步為大家詳細介紹。

/* 清除背景圖片的重復顯示 */
body {
 background-repeat: no-repeat; /* 背景圖片不重復 */
 background-size: cover; /* 強制完全覆蓋，不會出現縮放問題 */
}

以上代碼，是針對頁面背景圖片的問題的。通過將背景圖片的重復顯示清除，并進行強制完全覆蓋，使頁面看上去美觀大方。

/* 清除普通圖片的重復顯示 */
img {
 display: block; /* 將img標簽轉換為塊狀元素 */
 margin: 0 auto; /* 水平居中 */
}

以上代碼，是針對普通圖片（img標簽）的問題的。使用display屬性將img標簽轉換為塊狀元素，然后通過設置margin屬性實現水平居中。

/* 清除背景圖和普通圖片的重復顯示 */
body {
 background-repeat: no-repeat; /* 背景圖片不重復 */
 background-size: cover; /* 強制完全覆蓋，不會出現縮放問題 */
}
img {
 display: block; /* 將img標簽轉換為塊狀元素 */
 margin: 0 auto; /* 水平居中 */
}

最后，以上是針對頁面中背景圖片和普通圖片的問題的代碼。兩種情況都涵蓋到了，可以在實際開發中直接應用。相信大家看完這篇文章后，已經可以輕松地解決圖片重復顯示的問題了吧。如果日后還遇到其他問題，可以多多Consult百度或者Google，切勿貪圖方便而不自學。