在CSS中調(diào)用一個PNG圖像中的多個圖標(biāo),需要使用CSS的background-image
屬性,以及background-position
屬性來定位圖像中的不同圖標(biāo),以下是一個示例代碼:
.icon-container { width: 32px; height: 32px; background-image: url('path/to/your/image.png'); background-position: 0 0; /* ***個圖標(biāo)的位置 */ } .icon-container:before { content: ""; position: absolute; top: 0; left: 32px; /* 第二個圖標(biāo)的位置 */ width: 32px; height: 32px; background-image: url('path/to/your/image.png'); background-position: -32px 0; /* 第二個圖標(biāo)的位置 */ }
在這個示例中,我們假設(shè)你的PNG圖像中有兩個圖標(biāo),分別位于0,0和-32px,0的位置。background-position
屬性用于調(diào)整圖標(biāo)在容器中的位置,注意,這里的位置是相對于容器左上角的,因此我們需要將第二個圖標(biāo)的位置設(shè)置為相對于***個圖標(biāo)的左側(cè)偏移。
如果你有更多的圖標(biāo),可以使用類似的方法,通過調(diào)整background-position
屬性來定位它們,這種方法可以靈活地在CSS中調(diào)用PNG圖像中的多個圖標(biāo),無需使用額外的HTML元素或JavaScript代碼。