CSS是一種強大的前端技術，可以實現很多美妙的效果，比如將一張圖片覆蓋在另一張圖片的表面上。這種效果不僅可以增加頁面的藝術感和設計感，還可以為網站的視覺效果和用戶體驗加分。

如何實現圖片覆蓋圖片呢？其實很簡單，只需要用CSS中的position屬性和z-index屬性就可以了。下面我們就來看一下用CSS實現圖片覆蓋圖片的示例代碼：

/*HTML代碼*/
<div class="box">
<img class="bottom-img" src="bottom.jpg">
<img class="top-img" src="top.png">
</div>
/*CSS代碼*/
.box {
position: relative;
}
.bottom-img {
width: 100%;
height: 100%;
}
.top-img {
position: absolute;
top: 0;
left: 0;
z-index: 1;
}

代碼中，我們定義了一個包含兩張圖片的div容器，并使用position:relative屬性將其設置為相對定位。接著，我們為底部圖片設置了寬度和高度為100%的屬性，以充滿整個容器；為頂部圖片設置了position:absolute屬性，并將其定位在最上層。其中，z-index屬性用于控制元素的堆疊層級，數值越大則在層級上越靠上。

至此，我們就完成了圖片覆蓋圖片的效果。如果需要調整圖片的顯示效果，可以通過CSS屬性來自由控制。當然，為了達到更好的效果，建議盡量選用高質量的圖片，并做好圖片的配比和色調搭配。