在前端開發中，經常使用 CSS 來排版網頁和美化樣式。而 CSS 中，經常會用到圖片，如背景圖或者圖片元素等。

然而，有些開發者卻喜歡將同一張圖片在不同位置使用多次，導致了網頁的加載速度變慢，用戶體驗變差。為此，我們建議禁止圖片重復的 CSS 寫法。

/* 不要這么做 */
background-image: url("bg.png");
background-repeat: repeat;
header h1 {
background-image: url("bg.png");
background-repeat: no-repeat;
}
footer nav {
background-image: url("bg.png");
background-repeat: repeat-x;
}

上面的代碼中，bg.png 被重復使用了三次。如果該圖片較大，網頁加載的時間會變長，影響用戶體驗。

一個更好的解決方案是，將圖片作為一個 CSS 類，然后將其應用于需要使用該圖片的元素上，以使每個元素使用圖片時僅需添加一次。

/* 推薦做法 */
.bg-img {
background-image: url("bg.png");
}
header h1 {
background-repeat: no-repeat;
}
footer nav {
background-repeat: repeat-x;
}

上面的代碼中，我們將背景圖片的 CSS 屬性放在了一個類上，并在需要使用該圖片的元素上添加了這個類。這樣可以有效減少瀏覽器請求的圖片數量，從而提高網頁的加載速度。