案例一：
<div class="container"> <img src="background.jpg" class="background-img"> <img src="overlay.png" class="overlay-img"> </div>
，我們需要創(chuàng)建一個包含兩個圖片的<div>容器，并使用CSS給容器添加適當?shù)臉邮健Ｔ谶@個例子中，我們使用了.container類作為容器的樣式類，并添加了背景圖片(background.jpg)和遮罩圖片(overlay.png)作為容器中的兩個子元素。
接下來，我們使用CSS的position屬性和z-index屬性對兩個子元素進行定位和疊加。在這個例子中，我們給背景圖片(.background-img)設置了z-index為1，給遮罩圖片(.overlay-img)設置了z-index為2。由于z-index的值越大，元素越靠近屏幕的前面，所以設置遮罩圖片的z-index為2可以使其覆蓋在背景圖片上面。
然后，我們使用CSS的top和left屬性對遮罩圖片進行定位，以確保它與背景圖片完美疊加。根據(jù)具體的需求和效果，你可以通過調(diào)整top和left的值來調(diào)整遮罩圖片的位置。
最后，為了確保圖片疊加效果正常顯示，我們還可以使用CSS的width和height屬性對容器和子元素進行尺寸調(diào)整，以使每個元素適應容器的大小。這對于適應不同屏幕尺寸和設備非常重要。
案例二：
<div class="container"> <div class="background-img"></div> <div class="overlay-img"></div> </div>
在這個案例中，我們使用了<div>標簽代替<img>標簽來創(chuàng)建圖片元素。這種方法可以方便地通過CSS將背景圖像和遮罩圖像添加到容器中，并使用background-image屬性來設置圖像的URL。同樣地，我們可以使用position屬性、z-index屬性和其他定位屬性對兩個子元素進行設置和調(diào)整，實現(xiàn)圖片的疊加效果。
起來，通過CSS的定位屬性和層級（z-index）可以輕松實現(xiàn)div css圖片疊加效果。我們可以使用<img>標簽或<div>標簽作為容器的子元素，并通過CSS來控制元素的位置、尺寸和層級。在實際應用中，使用圖片疊加效果能夠為網(wǎng)頁或應用增添更多的創(chuàng)意和吸引力。