CSS中，背景圖片可以使用background-image屬性來(lái)設(shè)置，但是在很多情況下，我們需要在元素上添加一張圖片，同時(shí)保證該圖片不會(huì)被重復(fù)出現(xiàn)。這時(shí)可以使用CSS中的圖片前景不重復(fù)技術(shù)。

圖片前景不重復(fù)，即設(shè)置元素的背景顏色為透明（transparent），再在元素上添加一張圖片，并通過(guò)background-repeat: no-repeat屬性來(lái)設(shè)置該圖片不得被重復(fù)出現(xiàn)。下面是示例代碼：

.example{
background-color: transparent;
background-image: url(img/example.png);
background-repeat: no-repeat;
}

需要注意的是，當(dāng)設(shè)置元素的背景顏色為透明時(shí)，需確保該元素不會(huì)被任何覆蓋，否則背景顏色可能會(huì)被其他元素遮蓋掉。

在實(shí)際應(yīng)用中，可以將不重復(fù)的圖片作為元素中的圖標(biāo)，以達(dá)到美化UI的效果。如下圖所示：

.icon{
background-color: transparent;
background-image: url(img/icon.png);
background-repeat: no-repeat;
width: 20px;
height: 20px;
}
<div class="icon"></div>

通過(guò)這樣的技術(shù)，我們可以讓圖片在元素上不被重復(fù)出現(xiàn)，從而達(dá)到更好的UI效果。