站長資訊網(wǎng)
css重疊圖片的方法：先通過給圖片添加“position: absolute;”樣式進行絕對定位；然后使用margin-left和margin-top屬性設置圖片位置即可。
本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
使用css把兩個圖片疊加，可以通過position定位屬性和margin-left和margin-top屬性來設置圖片疊加效果。
代碼示例：
利用CSS實現(xiàn)圖片重疊，當鼠標懸浮到第一張圖片的時候，第二張圖片會顯示出來。
<!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>
效果圖：
（學習視頻分享：css視頻教程）
