HTML怎么图片叠加
时间: 2023-12-30 16:04:05 浏览: 31
HTML中可以使用CSS的position属性和z-index属性来实现图片叠加效果。下面是一个示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
width: 400px;
height: 400px;
}
.image1 {
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
.image2 {
position: absolute;
top: 0;
left: 0;
z-index: 2;
}
</style>
</head>
<body>
<div class="container">
<img src="image1.jpg" alt="Image 1" class="image1">
<img src="image2.jpg" alt="Image 2" class="image2">
</div>
</body>
</html>
```
在上面的代码中,我们创建了一个容器div,并设置其position属性为relative,然后在容器内部放置两个img标签,分别代表要叠加的两张图片。通过设置它们的position属性为absolute,并使用top和left属性来控制它们的位置,再使用z-index属性来控制它们的叠加顺序,z-index值越大,显示在越上层。
请注意,上述代码中的image1.jpg和image2.jpg是示例图片的路径,你需要将其替换为你自己的图片路径。