CSS 在父背景中剪切透明框

Question

我有一个包含页眉、内容和页脚的包装器。

身体是一个图像，包装也是一个图像。页眉和页脚背景是透明的，使包装背景图像可见。不过，我需要以某种方式剪切内容 div 中的包装背景，以便正文背景图像可见。

我用

box-shadow

和其他黑客尝试过，但它们不起作用，因为主体和包装背景都是图像。

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;
}

.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>

我还尝试了一种解决方法来关闭包装背景图像并将背景图像分别添加到页眉和页脚，但随后图像未对齐。

由于内容背景图像是可切换的。我使用类似选项卡的内容，因此有时背景应该是透明的，有时应该是包装背景图像。

澄清身体不是实际图像而是透明的，因为它全部在 CEF 中，因此当身体透明时会显示游戏。

示例图片

Answer 1

不确定这是否正是您正在寻找的。但您需要更改图像的位置..

https://codepen.io/croatiagm/pen/xxeeKZx

body {
  background-size: cover;
  margin: 0;
}

.wrapper {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
  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;
}

.content {
  flex-grow: 1;
    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-position: center;
}

.header {
  height: 20%;
  border-bottom: solid 2px black;
}

.footer {
  height: 20%;
  border-top: solid 2px black;
}

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