在網頁設計中，我們經常需要在圖片上添加一些裝飾效果，比如在圖片上加上水印，或者在圖片旁邊加上一些小圖標等等。而這時候，我們可以使用 CSS 在圖片上方添加一個覆蓋層，并在覆蓋層上放置我們需要的裝飾圖片。

首先，我們需要為圖片添加一個容器，可以使用 div、figure 或者 p 等標簽，然后在容器中放置我們的圖片。接下來，我們可以使用 CSS 在容器上添加一個覆蓋層，這里我們使用 position 和 z-index 屬性，讓覆蓋層在圖片上方并且不影響圖片的顯示。最后，在覆蓋層上放置我們需要的裝飾圖片即可。

<div class="image-container">
<img src="example.jpg" alt="Example Image">
<div class="overlay">
<img src="overlay.png" alt="Overlay Image">
</div>
</div>
.image-container {
position: relative;
}
.overlay {
position: absolute;
top: 0;
left: 0;
z-index: 10;
}

在上面的代碼中，我們創建了一個名為 image-container 的容器來放置圖片，然后在容器中使用 img 標簽來放置圖片本身，并在容器中使用一個名為 overlay 的 div 元素來作為覆蓋層。在 CSS 中，我們為 image-container 添加了 position: relative，這是為了讓容器成為覆蓋層的父元素，同時也是為了讓覆蓋層能夠相對于容器進行定位。而在 overlay 類中，我們使用了 position: absolute 來讓覆蓋層相對于 image-container 進行絕對定位，然后使用 top、left 和 z-index 屬性來調整覆蓋層的位置和層級。

最后，我們在 overlay 中使用 img 標簽來放置裝飾圖片，并設置圖片的 alt 屬性為 Overlay Image，這是為了讓屏幕閱讀器等輔助技術能夠正確讀取圖片信息。這樣一來，我們就成功地在圖片上方添加了一個裝飾圖片。