如何创建“透视”背景？答案

【问题标题】：如何创建“透视”背景？
【发布时间】：2022-01-20 12:35:57
【问题描述】：

我正在尝试使文本具有一个背景，以掩盖在其后面滚动但显示渐变背景的彩色 div。好像它有一个固定的“窗口”，可以透视并显示背景。

https://codepen.io/santandrea/pen/wvrdmmj

body {
  background-color: background: rgb(131, 58, 180);
  background: linear-gradient(90deg, rgba(131, 58, 180, 1) 0%, rgba(253, 29, 29, 1) 50%, rgba(252, 176, 69, 1) 100%);
}

#element {
  width: max-content;
  position: fixed;
  margin: 0 auto;
  left: 0;
  right: 0;
  font-size: 40px;
  text-align: center;
  padding: 20px;
  top: 40vh
}

.box {
  width: 100%;
  height: 200px;
}

.a {
  background-color: green;
}

.b {
  background-color: purple;
}

.c {
  background-color: grey;
}

.d {
  background-color: red;
}

section {
  max-width: 60%;
  margin: 0 auto;
  margin-top: 100px;
}

<div id="element">
  text
</div>

<section>
  <div class="box a"></div>
  <div class="box b"></div>
  <div class="box c"></div>
  <div class="box d"></div>
  <div class="box a"></div>
  <div class="box b"></div>
  <div class="box c"></div>
  <div class="box d"></div>
</section>

【问题讨论】：

您在问是否可以使其他元素在固定元素后面滚动时变得透明？所以只有背景在固定元素后面是可见的？
请添加您到目前为止编写的代码，并说明它没有创建您想要实现的效果。

标签： javascript css

【解决方案1】：

在我看来，这个答案并不理想，并且有一定的局限性。

只要主背景有fixed的附件，就可以给固定文本框同样的背景，看起来“透明”。

这只是因为正文和文本元素共享相同的背景。

body {
  background-color: background: rgb(131, 58, 180);
  background: linear-gradient(90deg, rgba(131, 58, 180, 1) 0%, rgba(253, 29, 29, 1) 50%, rgba(252, 176, 69, 1) 100%);
}

#element {
  width: max-content;
  position: fixed;
  margin: 0 auto;
  left: 0;
  right: 0;
  font-size: 40px;
  text-align: center;
  padding: 20px;
  top: 40vh;

  /* same background as body */
  background: linear-gradient(90deg, rgba(131, 58, 180, 1) 0%, rgba(253, 29, 29, 1) 50%, rgba(252, 176, 69, 1) 100%);
  /* this line is key to it working */
  background-attachment: fixed;
}

.box {
  width: 100%;
  height: 200px;
}

.a {
  background-color: green;
}

.b {
  background-color: purple;
}

.c {
  background-color: grey;
}

.d {
  background-color: red;
}

section {
  max-width: 60%;
  margin: 0 auto;
  margin-top: 100px;
}

<div id="element">
  text
</div>

<section>
  <div class="box a"></div>
  <div class="box b"></div>
  <div class="box c"></div>
  <div class="box d"></div>
  <div class="box a"></div>
  <div class="box b"></div>
  <div class="box c"></div>
  <div class="box d"></div>
</section>

【讨论】：