在網站開發過程中，有時需要在圖片上放置一些符號或圖標。通過CSS的技巧，我們可以很容易地實現這一功能。

首先，我們需要在HTML中使用img標簽插入我們要添加圖標的圖片：

<div class="img-box">
<img src="example.jpg" alt="示例圖片">
</div>

接下來，我們可以使用CSS對圖片進行定位和樣式設置。我們可以使用position屬性來設置圖標的位置，如下所示：

.img-box {
position: relative;
}
.img-box:before {
content: "";
position: absolute;
top: 10px;
left: 10px;
width: 20px;
height: 20px;
background-image: url("icon.png");
}

在上述CSS中，我們首先將包含圖片的div元素設置為相對定位。然后，我們使用:before偽元素在圖片上創建一個空元素，用于承載我們的圖標。

在:before元素中，我們將content屬性設置為一個空字符串，使其不顯示任何內容。然后，我們使用position:absolute設置圖標的絕對位置，使用top和left屬性分別設置其位置偏移值。width和height屬性用于設置圖標的大小，而background-image屬性用于指定我們要使用的圖標。

通過這種方式，我們可以在需要的情況下在圖片上方便地添加圖標，而不必修改圖片本身。這種技術也可以用于創建各種各樣的效果，例如鼠標懸停狀態時的動畫效果等。