0

我想创建一个效果，其中可滚动页面上的元素具有随其滚动位置而变化的渐变背景，因此渐变始终保持不变，并且子元素有点像所述渐变的“窗口”。

我通过使用带有渐变填充的 SVG 图像作为 a 成功地创建了这样的效果（参见下面的 JSFiddle）background-image，background-attachment: fixed但是由此产生的滚动性能非常糟糕，尤其是在 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>

4

1 回答 1

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>

于 2021-01-17T11:29:43.360 回答