在網(wǎng)頁(yè)設(shè)計(jì)中，我們經(jīng)常需要在一張圖片上添加另一張圖片。這時(shí)候，我們可以使用CSS來(lái)實(shí)現(xiàn)上覆蓋圖片的效果。

首先，我們需要在HTML文件中定義兩張圖片：

<div class="container">
<img class="bottom-img" src="bottom-image.jpg">
<img class="top-img" src="top-image.png">
</div>

在CSS中，我們可以使用position屬性來(lái)控制圖片的位置。將position設(shè)置為absolute可以讓圖片脫離文檔流，并且可以通過(guò)top和left屬性來(lái)調(diào)整其位置。

我們可以將下層圖片的位置設(shè)置為relative，將上層圖片的位置設(shè)置為absolute。然后通過(guò)調(diào)整上層圖片的top和left屬性來(lái)讓其覆蓋在下層圖片之上：

.container {
position: relative;
}
.bottom-img {
display: block;
width: 100%;
height: auto;
}
.top-img {
position: absolute;
top: 0;
left: 0;
}

在上述代碼中，我們將下層圖片的位置設(shè)置為relative，這樣上層圖片就會(huì)相對(duì)于下層圖片進(jìn)行定位。我們還設(shè)置了下層圖片的寬度為100%以使其充滿整個(gè)容器。

上層圖片的位置被設(shè)置為absolute，然后通過(guò)設(shè)置top和left屬性來(lái)控制其位置。這里我們將top和left都設(shè)置為0，這樣上層圖片就覆蓋在下層圖片的頂部。

通過(guò)使用CSS，我們可以很方便地實(shí)現(xiàn)上覆蓋圖片的效果。如果我們需要實(shí)現(xiàn)更復(fù)雜的圖片效果，也可以繼續(xù)探究CSS的更多屬性和技巧。