站长资讯网
css重叠图片的方法：先通过给图片添加“position: absolute;”样式进行绝对定位；然后使用margin-left和margin-top属性设置图片位置即可。
本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。
使用css把两个图片叠加，可以通过position定位属性和margin-left和margin-top属性来设置图片叠加效果。
代码示例：
利用CSS实现图片重叠，当鼠标悬浮到第一张图片的时候，第二张图片会显示出来。
<!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视频教程）