如何使用CSS实现单张背景图片跨越多个带间距的div显示？

嘿，我完全懂你想要的效果！就像在Figma里用蒙版把一张完整的图拆成几个带圆角、还有间距的卡片，对吧？其实CSS里也能实现这个效果，思路和Figma的蒙版逻辑很像，我来给你捋捋怎么改：

首先你现在的问题是子card元素有自己的蓝色背景，把父容器的背景图挡住了，所以第一步得把这个背景色去掉，换成用**蒙版（mask）**来实现卡片的圆角和间距效果，这样父容器的背景图就能透出来啦。

给你个具体的实现代码参考：

body {
  background-color: #000;
  color: #fff;
}

.cards {
  width: 1024px;
  height: 500px;
  background-image: url('https://images.pexels.com/photos/12984738/pexels-photo-12984738.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1');
  background-size: cover;
  background-position: center;
  /* 用grid排列子卡片，方便控制间距 */
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px; /* 卡片之间的间距 */
  padding: 20px;
}

.card {
  /* 去掉原来的纯色背景 */
  /* background-color: #2563eb; */
  border-radius: 20px;
  /* 用mask实现圆角+间距的镂空效果，让父背景透出来 */
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  /* 可选：给卡片加半透明边框增强层次感 */
  border: 1px solid rgba(255,255,255,0.2);
}

简单解释下蒙版的逻辑：

• 第一个渐变是只在卡片的内容区域保留白色（也就是允许父背景透出的区域）
• 第二个渐变是覆盖整个卡片元素的白色
• 通过mask-composite: exclude把两者重叠的区域排除，这样就留出了间距的透明部分，同时圆角也会作用在蒙版上，完美复刻Figma的蒙版效果

要是你想保留卡片的底色层次感，也可以给.card加半透明背景，比如background-color: rgba(37,99,235,0.3)，这样既能看到父背景图，又有卡片的视觉区分度。

备注：内容来源于stack exchange，提问作者simon