css控制两张图片重合

基础概念

CSS（层叠样式表）是一种用于描述HTML或XML（包括SVG、MathML等各种XML方言）文档样式的样式表语言。通过CSS，可以控制网页的布局和外观。

类型

内联样式：直接在HTML元素中使用style属性。
内部样式表：在HTML文档的<head>部分使用<style>标签。
外部样式表：通过<link>标签引入外部CSS文件。

应用场景

网页布局：如浮动、定位等。
样式美化：如颜色、字体、背景等。
响应式设计：根据不同设备调整布局。

问题描述

如何使用CSS控制两张图片重合？

解决方案

可以使用CSS的定位属性来实现图片的重合。以下是一个简单的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Overlay</title>
    <style>
        .container {
            position: relative;
            width: 300px;
            height: 200px;
        }
        .image1, .image2 {
            position: absolute;
            top: 0;
            left: 0;
        }
        .image1 {
            z-index: 1;
        }
        .image2 {
            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>

解释

容器定位：.container元素使用position: relative;，这样内部的绝对定位元素会相对于这个容器进行定位。
图片定位：.image1和.image2都使用position: absolute;，并且设置top: 0;和left: 0;，这样两张图片会重叠在一起。
层级控制：通过z-index属性控制图片的层级，z-index值越大，图片越在上层。