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

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

<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;
}

在上面的代碼中，我們?yōu)?img>標(biāo)簽的父元素添加了一個(gè)偽元素，通過設(shè)置該偽元素的position為absolute，并給其設(shè)置了top、left等屬性來指定其位置，然后使用background屬性為其設(shè)置小的圖片元素，其中url的值為將小的圖片元素轉(zhuǎn)換為data URI格式后的字符串。

需要注意的是，當(dāng)為標(biāo)簽的父元素添加偽元素時(shí)，需要給該父元素設(shè)置position: relative;，否則偽元素的position值將默認(rèn)為static，無法正確的定位到=img標(biāo)簽上。

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