站長(zhǎng)資訊網(wǎng)
css重疊圖片的方法：先通過(guò)給圖片添加“position: absolute;”樣式進(jìn)行絕對(duì)定位；然后使用margin-left和margin-top屬性設(shè)置圖片位置即可。
本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
使用css把兩個(gè)圖片疊加，可以通過(guò)position定位屬性和margin-left和margin-top屬性來(lái)設(shè)置圖片疊加效果。
代碼示例：
利用CSS實(shí)現(xiàn)圖片重疊，當(dāng)鼠標(biāo)懸浮到第一張圖片的時(shí)候，第二張圖片會(huì)顯示出來(lái)。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>圖片重疊</title> <style> ul li { position: relative; float: left; } ul li #play { position: absolute; width: 150px; height: 100px; margin-top: 85px; margin-left: 78px; display: none; } ul li #yuan { position: absolute; width: 300px; height: 300px; margin-left: 0px; margin-top: 0px; } ul li #yuan:hover +#play { display: block; } </style> </head> <body> <ul> <li> <!-- <img id="play" src="img/ia_100000164.jpg"> --> <img id="yuan" src="img/ia_100000165.jpg"> <!-- 放在下面，反而顯示在上面 --> <img id="play" src="img/ia_100000164.jpg"> </li> </ul> </body> </html>
效果圖：
（學(xué)習(xí)視頻分享：css視頻教程）
