在網頁制作中，我們不僅需要使用圖片來美化頁面，很多時候還需要在圖片上添加一些小的圖片元素，例如小圖標、小角標等等，這些小的圖片元素可以讓頁面看上去更加的精致和有趣。

而如何在CSS中實現在圖片上添加小的圖片元素呢？其實很簡單，HTML中的標簽中的src屬性有一個特殊的值，即data URI，可以在該屬性值中直接嵌入圖片的二進制數據，我們可以通過CSS中的background屬性來為該標簽的父元素添加小的圖片元素。

<div class="img-box">
<img src="img/example.jpg" alt="">
</div>
.img-box {
position: relative;
}
.img-box::after {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 40px;
height: 40px;
background: url(data:image/png;base64,iVBORw0KGg...) no-repeat center center;
}

在上面的代碼中，我們為標簽的父元素添加了一個偽元素，通過設置該偽元素的position為absolute，并給其設置了top、left等屬性來指定其位置，然后使用background屬性為其設置小的圖片元素，其中url的值為將小的圖片元素轉換為data URI格式后的字符串。

需要注意的是，當為標簽的父元素添加偽元素時，需要給該父元素設置position: relative;，否則偽元素的position值將默認為static，無法正確的定位到=img標簽上。

上面的代碼只是實現了為圖片上添加小圖標的簡單示例，根據實際需要，可以通過CSS的background屬性使用不同的圖像格式，來為圖片添加不同類型的小圖標元素。