html - 如何用CSS制作box items的背景(透明)，body的背景？

Question

下图中有一个盒子，盒子里面有圆形。
盒子的背景是木纹的，但是盒子里面元素的背景是透明的(body background)。



我用 CSS 开发了图片中的设计，但我不知道如何使框元素的背景透明。

我的代码:

body {
  background: #603813;
  background: -webkit-linear-gradient(to right, #b29f94, #603813);
  background: linear-gradient(to right, #b29f94, #603813);
}

.box {
  width: 400px;
  height: auto;
  background: url('https://images.unsplash.com/photo-1538645731800-4640c639bba7');
  background-size: cover;
  margin-left: calc(50vw - 200px);
  display: grid;
  grid-gap: 1em;
  grid-template-rows: repeat(6, auto);
  grid-template-columns: repeat(4, auto);
  padding: 10px;
  margin-top: 15%;
}

.element {
  width: 3em;
  height: 3em;
  border-radius: 50%;
  border: 2px solid #000;
}

<div class="box">
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
</div>

如何使用 CSS 制作 box 元素的背景(透明)，body 的背景？

Answer 1

您可以将它与 background-attachment: fixed 结合使用.这达到了预期的结果。

fixed: stays fixed no matter what. It's kind of like a physical window: moving around the window changes your perspective, but it doesn't change where things are outside of the window.

:root {
  --body-bg: linear-gradient(to right, #b29f94, #603813);
}

body {
  background-color: #603813;
  background-image: var(--body-bg);
  background-attachment: fixed;
}

.box {
  width: 400px;
  height: auto;
  background: lime;
  background: url('https://images.unsplash.com/photo-1538645731800-4640c639bba7');
  background-size: cover;
  margin-left: calc(50vw - 200px);
  display: grid;
  grid-gap: 1em;
  grid-template-rows: repeat(6, auto);
  grid-template-columns: repeat(4, auto);
  padding: 10px;
  margin-top: 15%;
}

.element {
  width: 3em;
  height: 3em;
  border-radius: 50%;
  border: 2px solid #000;
  background-image: var(--body-bg);
  background-attachment: fixed;
}

<div class="box">
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
</div>