如何用CSS设置子元素未填满父元素时空白区域的背景色？

我目前的代码如下：

.container {
  background-image: url("https://images.pexels.com/photos/38136/pexels-photo-38136.jpeg?w=1260&h=750&dpr=2&auto=compress&cs=tinysrgb");
  width: 100%;
  height: 100%;
}

.element1,
.element2 {
  width: 200px;
  height: 200px;
  display: inline-block;
  background-color: aliceblue;
}

<div class="container">
  <div class="element1">
    123
  </div>
  <div class="element2">
    5555
  </div>
</div>

我希望元素外的空白区域为白色，而element1和element2显示背景图。预期效果为：空白区域呈白色，子元素透出父容器的背景图。

更新说明 #

我更换了实现方式并达成了预期效果，抱歉之前的问题描述不够清晰。但我仍想了解是否可以用最初的思路实现：容器带有背景图，将子元素背景设为透明以显示容器背景图，同时将元素外的空白区域设为白色。这样我无需进行复杂计算，还能自由修改元素的数量和尺寸，实现起来更灵活。

我当前的实现代码如下：

<style>
    body {
        margin: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: rgba(9, 151, 104, 0.808);
    }

    .container {
        width:300px;
        height: 300px;
        display: grid;
        grid-template-columns: repeat(3,1fr);
    }

    .child-element {
        border: none;
        background-image: url("https://images.pexels.com/photos/732547/pexels-photo-732547.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1");
        box-shadow: inset 0 0 0 1px #fff;
        background-size: 300px 300px;
        position: relative;
        top: 20px;
        background-position-y: -200px;
    }

    .child-element:nth-child(3n+1){
        left: -20px;
        background-position-x: 0;
    }

    .child-element:nth-child(3n+2){
        left: 0;
        background-position-x: -100px;
    }

    .child-element:nth-child(3n){
        left: 20px;
        background-position-x: -200px;
    }
    .child-element:nth-child(-n+6){
        top: 0;
        background-position-y: -100px;
    }
    .child-element:nth-child(-n+3){
        top: -20px;
        background-position-y: 0;
    }

</style>

<div class="container">
  
  <div class="child-element">
  </div>
  <div class="child-element">
  </div>
  <div class="child-element">
  </div>
  <div class="child-element">
  </div>
  <div class="child-element">
  </div>
  <div class="child-element">
  </div>
  <div class="child-element">
  </div>
  <div class="child-element">
  </div>
  <div class="child-element">
  </div>
  

</div>

解决方案 #

可以通过以下方式实现你最初的思路，无需复杂计算，支持自由修改子元素数量和尺寸：

核心思路：父容器叠加白色背景与背景图，子元素透明透出背景图

给父容器设置两层背景：底层白色覆盖整个容器（对应空白区域），上层背景图仅在子元素覆盖的区域显示，子元素设为透明即可透出背景图。

.container {
  width: 100%;
  min-height: 100vh; /* 确保容器占满视口高度 */
  position: relative;
}

/* 白色背景层：覆盖整个容器，对应空白区域 */
.container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  z-index: 0;
}

/* 背景图层：仅在子元素区域显示 */
.container::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("https://images.pexels.com/photos/38136/pexels-photo-38136.jpeg?w=1260&h=750&dpr=2&auto=compress&cs=tinysrgb");
  background-size: cover;
  background-position: center;
  z-index: 1;
  /* 使用子元素作为遮罩，仅显示子元素覆盖的区域 */
  mask: 
    linear-gradient(#fff, #fff) content-box,
    linear-gradient(#fff, #fff);
  mask-composite: exclude;
  padding: 0; /* 初始无内边距，子元素直接覆盖背景图区域 */
}

.element1,
.element2 {
  width: 200px;
  height: 200px;
  display: inline-block;
  background-color: transparent; /* 子元素透明，透出背景图 */
  position: relative;
  z-index: 2; /* 确保子元素在最上层 */
  margin: 20px; /* 子元素之间的间距，空白区域自动显示白色 */
}

效果说明

• 容器内未被子元素覆盖的区域显示白色（来自::before伪元素）
• 子元素区域透出父容器的背景图（来自::after伪元素，通过mask限制显示范围）
• 可以自由调整子元素的尺寸、数量和间距，无需修改背景图相关属性

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