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

Document

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

3、在兩個(gè)div內(nèi)分別加上一個(gè)圖片標(biāo)簽img，并且寫上兩個(gè)圖片的路徑。

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

position: absolute;

}

.b{

position: absolute;

}

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

z-index: 1;

position: absolute;

}

.b{

z-index: 2;

position: absolute;

}

6、通過left和top設(shè)置div距離頁面左邊緣的距離和距離頁面上邊緣的位置，實(shí)現(xiàn)兩個(gè)圖片疊加。.a{

z-index: 1;

position: absolute;

left: 120px;

top: 120px;

}

7、在瀏覽器打開test.html文件，查看實(shí)現(xiàn)圖片疊加的效果。

全部代碼：

Document

.a{

z-index: 1;

position: absolute;

left: 120px;

top: 120px;

}

.b{

z-index: 2;

position: absolute;

}

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。