Как сделать фон (прозрачный) из коробки элементов, фон тела с CSS?

Question

На фото ниже есть один прямоугольник, а внутри прямоугольника есть круглые кружочки. Фон коробки имеет узор дерева, но фон элементов внутри коробки прозрачен (фон тела).

Я разработал дизайн, как на картинке с 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?

Answer 1

Вы можете комбинировать его с background-attachment: fixed. Это дает желаемый результат.

фиксированный: остается фиксированным, несмотря ни на что. Это похоже на физическое окно: перемещение вокруг окна меняет вашу перспективу, но не меняет то, где что-то находится за пределами окна.

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

Answer 2

Чтобы иметь реальную прозрачность, вы можете рассмотреть маску, как показано ниже:

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

.box {
  width: 400px;
  height: 400px;
  margin-left: calc(50vw - 200px);
  margin-top:15%;
  
  background: 
    /* Create the black border*/
    radial-gradient(farthest-side, black 70%,transparent 73%) 0 0/4em 4em round,
    url('https://images.unsplash.com/photo-1538645731800-4640c639bba7') center/cover;
  /* create the holes*/
  -webkit-mask:radial-gradient(farthest-side, transparent 66%,#fff 67%) 0 0/4em 4em round;
          mask:radial-gradient(farthest-side, transparent 66%,#fff 67%) 0 0/4em 4em round;
}

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

Вы также можете хранить свои элементы внутри, если хотите:

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

.box {
  width: calc(8*4em);
  height: calc(4*4em);
  margin: 15% auto;
  display: flex;
  flex-wrap: wrap;
  position:relative;
  z-index:0;
}
.box:before {
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background: url('https://images.unsplash.com/photo-1538645731800-4640c639bba7') center/cover;
  /* create the holes*/
  -webkit-mask: radial-gradient(circle 1.5em, transparent 98%, #fff 100%) 0 0/4em 4em;
          mask: radial-gradient(circle 1.5em, transparent 98%, #fff 100%) 0 0/4em 4em;
}
.element {
  width: 3em;
  height: 3em;
  margin: 0.5em;
  border-radius: 50%;
  border: 2px solid red;
  box-sizing: border-box;
}

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