使用指南针反转渐变

Question

我正在尝试创建一个背景，其中相同的渐变从上到下重复，然后从下到上重复，就像这样：

我正在使用gradient generator并考虑Compass @include背景以包含两个渐变，但我无法使其工作，我只看到第一个渐变（从上到下）。

到目前为止我的代码是：

@include background(
  linear-gradient(top, #f1693c 0,#f1693c 80px,#f37744 81px,#f37744 122px,#f4824a 123px,#f4824a 163px,#f68d50 164px,#f68d50 50%) no-repeat center top,
  linear-gradient(top, #f1693c 0,#f1693c 80px,#f37744 81px,#f37744 122px,#f4824a 123px,#f4824a 163px,#f68d50 164px,#f68d50 50%) no-repeat center bottom);

如何包含两个渐变，一个与顶部对齐，另一个与底部对齐？

Answer 1

我不知道Compass，所以我可以帮助你使用Compass语法，但CSS应该是

div {
  width: 300px;
  height: 300px;
  border: solid 1px black;
  }
.test {
  background: linear-gradient(180deg, #f1693c 0,#f1693c 80px,#f37744 81px,#f37744 122px,#f4824a 123px,#f4824a 163px,#f68d50 164px,#f68d50 50%)   top center / 100% 50% no-repeat,
  linear-gradient(0deg, #f1693c 0,#f1693c 80px,#f37744 81px,#f37744 122px,#f4824a 123px,#f4824a 163px,#f68d50 164px,#f68d50 50%)  center bottom / 100% 50% no-repeat;
  }

<div class="test"></div>

您需要添加100％50％的大小。如果你不这样做，每张图片都会占据所有空间，而你只看到最顶层的