css如何重叠图片
程序员文章站
2022-03-12 20:39:39
...
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视频教程)
以上就是css如何重叠图片的详细内容,更多请关注其它相关文章!