点击刷新
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.jpg" alt="">
</div>
<div class="b">
<img src="./css-5.jpg" alt="">
</div>4、使用css对两个div的样式进行定义，（相关课程推荐：css视频教程） 分别设置其position属性为absolute，即两张图片在页面的位置是绝对定位。
.a{
position: absolute;
}
.b{
position: absolute;
}5、使用z-index设置两张图片的叠加的顺序，设置1.jpg在下面，2.jpg在上面。
.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.jpg" alt="">
</div>
<div class="b">
<img src="./css-5.jpg" alt="">
</div>
</body>
</html>© 著作权归作者所有
举报
发表评论
0/200
