在前端開發中，我們經常會遇到需要在一張圖片上覆蓋另一張圖片的情況。這時，我們需要使用CSS來實現覆蓋效果。

首先，我們需要定義一個容器來放置被覆蓋的圖片和覆蓋圖片。我們可以使用HTML中的<div>標簽來創建這個容器，并為其設置一個CSS樣式。

<div class="container">
<img src="img1.jpg" alt="被覆蓋的圖片">
<img src="img2.png" alt="覆蓋的圖片">
</div>
.container {
position: relative;
}

在CSS中，我們需要使用position屬性來定義容器的定位方式。我們將它設置為relative，這樣容器的子元素就可以使用絕對定位來相對于容器進行定位。

接下來，我們可以使用絕對定位來將覆蓋的圖片放置在被覆蓋的圖片上方。我們需要為覆蓋圖片設置一個z-index值，使其處于被覆蓋的圖片上方。

.container img:last-child {
position: absolute;
top: 0;
left: 0;
z-index: 1;
}

這里我們使用了CSS中的偽類選擇器:last-child，來選擇容器的最后一個子元素，也就是覆蓋圖片。我們將其設置為絕對定位，并設置top和left值為0，使其與被覆蓋的圖片重合。然后，我們將其z-index值設為1，使其處于被覆蓋的圖片上方。

最后，我們可以根據需要調整覆蓋圖片的位置，使其更加符合設計要求。

以上就是使用CSS將一張圖片覆蓋另一張圖片的方法。通過使用HTML中的<div>標簽創建容器，使用position屬性進行定位，使用z-index屬性設置層級關系，我們可以輕松實現這種效果。