CSS中背景圖作為制作網(wǎng)頁(yè)中不可或缺的元素之一，它可以讓網(wǎng)頁(yè)更加美觀、富有創(chuàng)意。而將背景圖與圖標(biāo)相結(jié)合，則可以讓網(wǎng)頁(yè)更加凸顯重點(diǎn)，提高用戶體驗(yàn)。下面介紹一種將CSS背景圖與圖標(biāo)相結(jié)合的方法。

.icon {
background-image: url('icon.png'); /* 圖標(biāo)背景圖 */
background-position: center center; /* 圖標(biāo)背景圖居中顯示 */
background-repeat: no-repeat; /* 背景圖不重復(fù) */
width: 50px;
height: 50px;
position: relative; /* 相對(duì)定位，使得子元素能夠絕對(duì)定位 */
}
.icon::before {
content: ''; /* 必須設(shè)置content */
position: absolute; /* 絕對(duì)定位 */
width: 20px;
height: 20px;
background-image: url('bg.png'); /* 背景圖 */
background-position: center center; /* 背景圖居中顯示 */
background-repeat: no-repeat; /* 背景圖不重復(fù) */
top: 10px;
left: 10px;
}

上述代碼中，我們首先為含有圖標(biāo)的元素設(shè)置了一個(gè)背景圖，然后使用偽元素::before為圖標(biāo)元素添加了一個(gè)居中顯示的背景圖。需要注意的是，在使用偽元素時(shí)，必須設(shè)置content屬性，否則偽元素將不會(huì)出現(xiàn)。

此方法可以用于各種圖標(biāo)樣式的實(shí)現(xiàn)，可以將不同的背景圖與不同的圖標(biāo)進(jìn)行搭配，增加網(wǎng)頁(yè)的品質(zhì)和實(shí)用性。