使用 Compass 反转渐变

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% 的尺寸。如果你不这样做，每张图片都会占据所有 space 而你只会看到最上面的一张

使用 Compass 反转渐变

Reversing gradients with Compass

css

gradient

compass