
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其它相关文章!












