CSS中背景圖作為制作網頁中不可或缺的元素之一，它可以讓網頁更加美觀、富有創意。而將背景圖與圖標相結合，則可以讓網頁更加凸顯重點，提高用戶體驗。下面介紹一種將CSS背景圖與圖標相結合的方法。

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

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

此方法可以用于各種圖標樣式的實現，可以將不同的背景圖與不同的圖標進行搭配，增加網頁的品質和實用性。