CSS实现Wrapper背景裁剪透明内容区以显示底层画面

问题场景 #

我有一个包含header、content和footer的wrapper容器：

• body为透明（CEF环境下透明时显示底层游戏画面），wrapper设置了背景图
• 当前header和footer背景透明，可显示wrapper的背景图，但需要让content区域“穿透”wrapper背景，显示底层游戏画面
• 尝试过box-shadow无效，单独给header/footer设背景出现图像错位；同时需要支持content背景切换：有时显示底层画面，有时显示wrapper背景

解决方案一：CSS Mask实现快速裁剪 #

利用CSS遮罩（mask）特性，直接在wrapper上定义显示区域，让content区域透明以露出底层画面，切换时只需修改遮罩即可。

修改后代码 #

body {
  background-image: url("https://images.unsplash.com/photo-1713813091291-ba9b947b8803?q=80&w=1926&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
  background-size: cover;
  margin: 0;
}

.wrapper {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
  background-image: url("https://images.unsplash.com/photo-1712668405876-d0df5c444e62?q=80&w=1932&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
  background-size: cover;
  /* 遮罩规则：header和footer区域显示背景，content区域透明 */
  mask: linear-gradient(to bottom, 
    black 0, black 10rem, 
    transparent 10rem, transparent calc(100% - 5rem), 
    black calc(100% - 5rem), black 100%);
  -webkit-mask: linear-gradient(to bottom, 
    black 0, black 10rem, 
    transparent 10rem, transparent calc(100% - 5rem), 
    black calc(100% - 5rem), black 100%);
}

/* 切换类：让content显示wrapper背景 */
.wrapper.show-content-bg {
  mask: linear-gradient(black, black);
  -webkit-mask: linear-gradient(black, black);
}

.content {
  flex-grow: 1;
}

.header {
  height: 10rem;
  border-bottom: solid 2px black;
}

.footer {
  height: 5rem;
  border-top: solid 2px black;
}

<div class="wrapper">
  <div class="header">Header</div>
  <div class="content">Content</div>
  <div class="footer">Footer</div>
</div>

<!-- 切换示例按钮（可根据业务逻辑触发） -->
<button onclick="document.querySelector('.wrapper').classList.toggle('show-content-bg')">
  切换Content背景
</button>

原理说明 #

• mask属性通过线性渐变定义三个区域：header（0~10rem）和footer（底部5rem）用black（不透明，显示背景），中间content区域用transparent（透明，露出底层画面）
• 添加show-content-bg类时，遮罩变为全黑，wrapper背景完全显示，content区域也会同步显示背景

解决方案二：拆分背景到Header/Footer（兼容低版本环境） #

如果担心mask的兼容性，可以将wrapper的背景拆分到header和footer，通过统一背景属性确保对齐，content单独控制背景显示。

修改后代码 #

body {
  background-image: url("https://images.unsplash.com/photo-1713813091291-ba9b947b8803?q=80&w=1926&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
  background-size: cover;
  margin: 0;
}

/* 定义全局背景变量，确保各组件背景统一 */
:root {
  --wrapper-bg-url: url("https://images.unsplash.com/photo-1712668405876-d0df5c444e62?q=80&w=1932&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
  --wrapper-bg-size: cover;
}

.wrapper {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
}

.content {
  flex-grow: 1;
  /* 默认透明，显示底层画面 */
}

/* Content显示背景的切换类 */
.content.show-bg {
  background-image: var(--wrapper-bg-url);
  background-size: var(--wrapper-bg-size);
  background-position: center;
}

.header {
  height: 10rem;
  border-bottom: solid 2px black;
  background-image: var(--wrapper-bg-url);
  background-size: var(--wrapper-bg-size);
  background-position: center top; /* 与原wrapper背景定位对齐 */
}

.footer {
  height: 5rem;
  border-top: solid 2px black;
  background-image: var(--wrapper-bg-url);
  background-size: var(--wrapper-bg-size);
  background-position: center bottom; /* 与原wrapper背景定位对齐 */
}

<div class="wrapper">
  <div class="header">Header</div>
  <div class="content">Content</div>
  <div class="footer">Footer</div>
</div>

<!-- 切换示例按钮 -->
<button onclick="document.querySelector('.content').classList.toggle('show-bg')">
  切换Content背景
</button>

原理说明 #

• 用CSS变量统一背景的URL和尺寸，避免重复代码
• header和footer分别设置background-position为center top和center bottom，确保背景与原wrapper的cover效果完全对齐，解决之前的错位问题
• content默认透明，添加show-bg类时显示统一的背景图

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