1、新建一個html文件，命名為test.html，用于講解css怎么把兩個圖片疊加在一起。

Document

2、新建兩個div，一個是class屬性為a的div，另一個是class屬性為b的div。

3、在兩個div內分別加上一個圖片標簽img，并且寫上兩個圖片的路徑。

4、使用css對兩個div的樣式進行定義，(相關課程推薦：css視頻教程) 分別設置其position屬性為absolute，即兩張圖片在頁面的位置是絕對定位。.a{

position: absolute;

}

.b{

position: absolute;

}

5、使用z-index設置兩張圖片的疊加的順序，設置1.jpg在下面，2.jpg在上面。.a{

z-index: 1;

position: absolute;

}

.b{

z-index: 2;

position: absolute;

}

6、通過left和top設置div距離頁面左邊緣的距離和距離頁面上邊緣的位置，實現兩個圖片疊加。.a{

z-index: 1;

position: absolute;

left: 120px;

top: 120px;

}

7、在瀏覽器打開test.html文件，查看實現圖片疊加的效果。

全部代碼：

Document

.a{

z-index: 1;

position: absolute;

left: 120px;

top: 120px;

}

.b{

z-index: 2;

position: absolute;

}

總結

以上是生活随笔為你收集整理的html 图片能重叠吗,css两张图片怎么叠加在一起？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。