快屏space渐变效果

Question

我想创建一种效果，其中可滚动页面上的元素具有随滚动位置而变化的渐变背景，因此渐变始终保持不变，子元素有点像“window" 表示渐变。

我已经通过使用带有渐变填充的 SVG 图像作为 background-image 和 background-attachment: fixed 成功地创建了这样的效果（请参阅下面的 JSFiddle），但是由此产生的滚动性能非常糟糕，尤其是在 Chromium 浏览器中。查看 DevTools 中的性能分析器会发现，与禁用效果时相比，每帧的 Paint 片段完成所需的时间是其四倍多。

现在我的问题是：有没有什么方法可以达到相同的结果，同时减少资源密集度？

#parent {
  display: flex;
  flex-wrap: wrap;
  width: 648px;
}
.child {
  display: grid;
  grid-template-rows: auto max-content;
  grid-template-columns: auto max-content max-content;
  grid-template-areas: 'a a a' 'b c d';
  width: 200px;
  height: 80px;
  margin: 8px;
  box-sizing: border-box;
  padding: 8px;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMnB4IiBoZWlnaHQ9IjMycHgiPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+LmF7b3BhY2l0eTowLjA1fS5ie2ZpbGw6bm9uZTtzdHJva2U6IzAwMDtzdHJva2Utd2lkdGg6ODtzdHJva2UtbGluZWNhcDpzcXVhcmU7c3Ryb2tlLW1pdGVybGltaXQ6MTB9PC9zdHlsZT48ZyBjbGFzcz0iYSI+PGxpbmUgY2xhc3M9ImIiIHgxPSIzMiIgeTE9IjAiIHgyPSIwIiB5Mj0iMzIiLz48bGluZSBjbGFzcz0iYiIgeDE9IjMyIiB5MT0iMzIiIHgyPSIwIiB5Mj0iNjQiLz48bGluZSBjbGFzcz0iYiIgeDE9IjMyIiB5MT0iLTMyIiB4Mj0iMCIgeTI9IjAiLz48L2c+PC9zdmc+"),  url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDBweCIgaGVpZ2h0PSIxMDBweCI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJhIiBncmFkaWVudFRyYW5zZm9ybT0icm90YXRlKDkwKSI+PHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjODBjMGZmIiAvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iI2ZmYzA4MCIgLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0idXJsKCNhKSIvPjwvc3ZnPg==");
  background-size: 32px, 100% 100%;
  background-attachment: fixed, fixed;
  background-repeat: repeat, repeat-x;
  background-position: 0 0, 0 0;
}
.sub-child-1,
.sub-child-2 {
  display: inline-block;
  width: 24px;
  height: 24px;
  border-radius: 24px;
  background-color: #0c0;
}

.child>span { grid-area: a; }

.sub-child-1 { grid-area: c; }
.sub-child-2 { grid-area: d; }

<div id="parent">
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
</div>

Answer 1

您可以尝试使用 position:fixed 元素来代替

#parent {
  display: flex;
  flex-wrap: wrap;
  width: 648px;
}
.child {
  display: grid;
  grid-template-rows: auto max-content;
  grid-template-columns: auto max-content max-content;
  grid-template-areas: 'a a a' 'b c d';
  width: 200px;
  height: 80px;
  margin: 8px;
  box-sizing: border-box;
  padding: 8px;
  clip-path:inset(0); /* clip the pseudo element to only its parent */
}
.child::before {
  content:"";
  position:fixed;
  z-index:-1;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMnB4IiBoZWlnaHQ9IjMycHgiPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+LmF7b3BhY2l0eTowLjA1fS5ie2ZpbGw6bm9uZTtzdHJva2U6IzAwMDtzdHJva2Utd2lkdGg6ODtzdHJva2UtbGluZWNhcDpzcXVhcmU7c3Ryb2tlLW1pdGVybGltaXQ6MTB9PC9zdHlsZT48ZyBjbGFzcz0iYSI+PGxpbmUgY2xhc3M9ImIiIHgxPSIzMiIgeTE9IjAiIHgyPSIwIiB5Mj0iMzIiLz48bGluZSBjbGFzcz0iYiIgeDE9IjMyIiB5MT0iMzIiIHgyPSIwIiB5Mj0iNjQiLz48bGluZSBjbGFzcz0iYiIgeDE9IjMyIiB5MT0iLTMyIiB4Mj0iMCIgeTI9IjAiLz48L2c+PC9zdmc+"),  url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDBweCIgaGVpZ2h0PSIxMDBweCI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJhIiBncmFkaWVudFRyYW5zZm9ybT0icm90YXRlKDkwKSI+PHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjODBjMGZmIiAvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iI2ZmYzA4MCIgLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0idXJsKCNhKSIvPjwvc3ZnPg==");
  background-size: 32px, 100% 100%;
  background-repeat: repeat, repeat-x;
}
.sub-child-1,
.sub-child-2 {
  display: inline-block;
  width: 24px;
  height: 24px;
  border-radius: 24px;
  background-color: #0c0;
}

.child>span { grid-area: a; }

.sub-child-1 { grid-area: c; }
.sub-child-2 { grid-area: d; }

<div id="parent">
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
  <div class="child">
    <span>Lorem ipsum</span>
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
</div>

快屏space渐变效果

Fast screen space gradient effect

css

performance

css-gradients