如何使用CSS将盒子项的背景变为透明并使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使盒子项目的背景透明，同时使body的背景透明？

- Mustafa

Answer 1

你可以将它与background-attachment: fixed结合使用，这样可以实现所需的效果。

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>

- doğukan

---

这真的很聪明。我会补充回答为什么这样做有效（例如，固定位置不是相对于元素定位，而是相对于视口定位）。 - disinfor

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>

- Temani Afif

---

这不完全是我想要的。我需要元素，因为我将使用元素。我将为每个项目提供一行数据和一列数据，并进行各种计算。 - Mustafa

@HibritUsta 你可以保留你的元素，但为了简单起见，我将它们删除了。你的元素将会在透明的空洞上方透明显示。 - Temani Afif

当我添加元素时，它看起来像链接。您可以查看：示例 - Mustafa

祝您健康，@Temani Afif。感谢您抽出宝贵的时间帮忙。我正在审核您的代码。有一些代码我不知道，我会学习它们。 - Mustafa