在CSS中，我們可以使用多種方法在同一個圖片中顯示多個小圖標，以下是一些常見的實現(xiàn)方式：
1、使用背景圖像：
CSS允許我們在一個元素上設置多個背景圖像，這樣，我們可以將多個小圖標作為背景圖像的一部分，疊加在一張圖片上。
```css
.icon-container {
background-image: url('image1.png'), url('image2.png'), url('image3.png');
background-position: 0 0, 50px 50px, 100px 100px;
}
```
2、使用偽元素：
我們可以使用CSS的偽元素（如::before和::after）來在圖片上添加小圖標。
```css
.icon-container {
position: relative;
}
.icon-container::before {
content: '';
position: absolute;
top: 10px;
left: 10px;
background-image: url('image1.png');
background-size: 20px;
}
.icon-container::after {
content: '';
position: absolute;
top: 20px;
left: 20px;
background-image: url('image2.png');
background-size: 30px;
}
```
3、使用SVG：
SVG圖像可以用來創(chuàng)建矢量圖形，包括小圖標，我們可以將多個SVG圖標疊加在一張圖片上，或者使用SVG的mask屬性來顯示特定的圖標。
```html
<div class="icon-container">
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" fill="url(#pattern)"></circle>
</svg>
</div>
```
```css
.icon-container {
position: relative;
}
.icon-container::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('image1.png');
}
.icon-container::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('image2.png');
}
```
4、使用CSS濾鏡：
我們可以使用CSS的濾鏡功能，如filter: drop-shadow()，來在圖片上添加小圖標，這種方法可以實現(xiàn)一些特殊效果，但需要一定的CSS技巧。
```css
.icon-container {
filter: drop-shadow(10px 10px 5px #ff0000); /* 添加紅色小圖標 */
}
```
注意：這種方法可能不適用于所有瀏覽器，且可能需要根據(jù)具體的瀏覽器需求進行調(diào)整。
