CSS背景圖標的“鏤空”效果可以使頁面更加美觀和有層次感。 在CSS中，我們可以通過制作半透明的背景圖標來實現這種效果。

.bg-icon {
background-image: url('icon.png');
background-color: #fff;
background-size: contain;
background-repeat: no-repeat;
padding: 10px;
border-radius: 50%;
box-shadow: 0 0 0 5px #fff, 0 0 0 8px #afafaf;
/* 下面是關鍵代碼 */
-webkit-mask-image: url('mask.png');
mask-image: url('mask.png');
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center center;
mask-position: center center;
}

在這段代碼中，“background-image”屬性用于指定透明的背景圖標，“background-color”用于指定背景色，“background-size”和“background-repeat”用于設置背景圖標的尺寸和重復方式。

關鍵代碼部分通過“-webkit-mask-image”和“mask-image”屬性指定了一個半透明的遮罩圖標，該圖標的大小和重復方式與背景圖標相同。 通過調整“border-radius”和“box-shadow”屬性，我們可以獲得一個凹凸有致的效果。

在實際應用中，我們可以將有圖標的元素添加“bg-icon”類。 通過修改“url”的值來改變遮罩圖標的形狀。 這將為您提供各種各樣的樣式選擇，以確保您的頁面始終具有最新的外觀。