如何用CSS为多个<div>元素单独设置同一张背景图并实现卡片堆叠

先修正你原CSS的语法错误： #

• card2里的top: 60pxpx多写了一个px，属于语法错误
• card3和card4的width、height属性没加分号，导致样式无法生效
• 重复书写背景图和尺寸代码，冗余且不好维护

优化后的实现方案 #

可以用CSS后代选择器统一给所有子div设置基础样式，再单独调整每个卡片的偏移和层级，代码更简洁：

优化后的CSS代码

/* 父容器设置相对定位，作为子元素绝对定位的参照 */
.card {
  position: relative;
  /* 设置足够大的宽高，容纳所有偏移后的卡片 */
  width: 350px;
  height: 430px;
}

/* 统一设置所有.card下的子div的背景图、尺寸 */
.card > div {
  width: 200px;
  height: 280px;
  background-image: url(https://i.pinimg.com/originals/10/80/a4/1080a4bd1a33cec92019fab5efb3995d.png);
  background-size: cover; /* 按比例填充容器，避免图片变形；也可以用200px 280px固定尺寸 */
  background-repeat: no-repeat;
  position: absolute;
}

/* 单独设置每个卡片的偏移量和层级 */
.card > div:nth-child(1) {
  top: 0;
  left: 0;
  z-index: 1;
}

.card > div:nth-child(2) {
  top: 30px;
  left: 30px;
  z-index: 2;
}

.card > div:nth-child(3) {
  top: 60px;
  left: 60px;
  z-index: 3;
}

.card > div:nth-child(4) {
  top: 90px;
  left: 90px;
  z-index: 4;
}

简化后的HTML代码（无需给子div加单独类名）

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>My First page</title>
</head>

<body>
  <div class="card">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</body>

</html>

关键说明 #

1. .card > div选择器可以一次性给所有子div应用相同的背景图、尺寸，避免重复代码
2. background-size: cover能让图片按比例适配容器，不会拉伸变形；如果需要严格匹配容器尺寸，也可以用background-size: 100% 100%
3. 父容器的相对定位是核心，让子元素的绝对偏移基于父容器计算，不会乱跑
4. 用nth-child代替单独类名，后续增减卡片时只需调整选择器即可，维护更方便

内容的提问来源于stack exchange，提问作者rd_nath