如何为多个 元素分别设置相同的背景图片

元素分别设置相同背景图是一种高频需求（例如实现叠放的卡片组、图标容器或响应式信息块）。关键在于：不要重复书写 background-image 声明多次，而应利用 css 的层叠性与选择器复用能力，既保证代码简洁，又便于后期维护。

✅ 正确做法：复用样式 + 精准定位

首先，修正原始代码中的典型错误：

• top: 60pxpx; → 应为 top: 60px;
• width: 200px height:280px; → 缺少分号，且 height 前需换行或加分号
• html 中嵌套结构混乱（.card 包含 .card2/.card3/.card4，但未给子元素设宽高，导致背景不可见）

推荐采用以下结构化写法：

/* CSS：统一背景 + 个体定位 */ .card {   width: 200px;   height: 280px;   background-image: url('https://i.pinimg.com/originals/10/80/a4/1080a4bd1a33cec92019fab5efb3995d.png');   background-size: cover; /* 推荐使用 cover 或 contain，更灵活适配 */   background-repeat: no-repeat;   background-position: center;   position: absolute; /* 启用绝对定位 */ }  /* 分别偏移各卡片位置（模拟叠放效果） */ .card-1 { top: 0;   left: 0;   z-index: 1; } .card-2 { top: 40px; left: 30px; z-index: 2; } .card-3 { top: 80px; left: 60px; z-index: 3; } .card-4 { top: 120px; left: 90px; z-index: 4; }

? 为什么用 background-size: cover？ 它能自动缩放图片以完全覆盖容器区域，同时保持宽高比，比固定像素值（如 200px 280px）更健壮——尤其当卡片尺寸响应式变化时。

⚠️ 注意事项

• 父容器需有定位上下文：若所有 .card 都用 position: absolute，建议将它们包裹在 position: relative 的容器内（如
  ），否则会相对于 定位，易失控。

• 图片路径优先使用相对路径或 cdn 稳定链接：示例中的外链图片可能因权限或失效无法加载，开发时建议本地存储并使用相对路径（如 ./images/card-bg.png）。
• 避免过度依赖 z-index：仅在真正需要层叠顺序时设置；若只是平铺，可省略。

✅ 进阶提示：用 CSS 自定义属性提升可维护性

:root {   --card-bg: url('./images/card-bg.png');   --card-width: 200px;   --card-height: 280px; } .card {   width: var(--card-width);   height: var(--card-height);   background: var(--card-bg) center/cover no-repeat; }

这样修改背景图或尺寸时，只需调整 :root 中的一处声明。

掌握这一技巧，你就能高效构建多卡片布局、产品展示墙、记忆卡片游戏等实用界面——从“写对”走向“写好”，正是前端进阶的第一步。