1、新建一个html文件,命名为test.html,用于讲解css怎么把两个图片叠加在一起。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html>
2、新建两个div,一个是class属性为a的div,另一个是class属性为b的div。
<div class="a"></div> <div class="b"></div>
3、在两个div内分别加上一个图片标签img,并且写上两个图片的路径。
<div class="a"> <img src="./css-4.webp" alt=""> </div> <div class="b"> <img src="./css-5.webp" alt=""> </div>
4、使用css对两个div的样式进行定义,(相关课程推荐:css视频教程) 分别设置其position属性为absolute,即两张图片在页面的位置是绝对定位。
.a{ position: absolute; } .b{ position: absolute; }
5、使用z-index设置两张图片的叠加的顺序,设置1.webp在下面,2.webp在上面。
.a{ z-index: 1; position: absolute; } .b{ z-index: 2; position: absolute; }
6、通过left和top设置div距离页面左边缘的距离和距离页面上边缘的位置,实现两个图片叠加。
.a{ z-index: 1; position: absolute; left: 120px; top: 120px; }
7、在浏览器打开test.html文件,查看实现图片叠加的效果。
全部代码:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style> .a{ z-index: 1; position: absolute; left: 120px; top: 120px; } .b{ z-index: 2; position: absolute; } </style> </head> <body> <div class="a"> <img src="./css-4.webp" alt=""> </div> <div class="b"> <img src="./css-5.webp" alt=""> </div> </body> </html>
本文来自css3答疑栏目,欢迎学习!
以上就是css两张图片怎么叠加在一起?的详细内容,更多请关注易知道|edz.cc其它相关文章!