CSS+獲取圖標位置

.icon {
position: relative;
display: inline-block;
width: 50px;
height: 50px;
}
.icon:before {
position: absolute;
top: 0;
left: 0;
content: "";
width: 100%;
height: 100%;
background-image: url("icons.png");
}
.icon-email:before {
background-position: 0 0; /* email圖標在icons.png的位置 */
}
.icon-phone:before {
background-position: -50px 0; /* phone圖標在icons.png的位置 */
}

說明：

上述代碼實現了在網頁中引用icons.png圖標圖片，并使用CSS定位方式獲得該圖片中不同圖標的位置，實現網頁中多個圖標的布局。

使用蒙板偽元素:before，它會填充在.icon元素的前面，然后使用background-image屬性設置圖片路徑，使用background-position屬性設置圖標在圖片中的位置，并定位圖標到正確的位置。