重复线性渐变中的百分比实际上是如何工作的？

Question

嗨，

我正在尝试重现此模式：http://imgur.com/dqBe7TX 但我不明白百分比是如何工作的。我尝试了很多组合，这是我能得到的最接近的组合：

 background:repeating-linear-gradient(#fafafa 0%, #e9e6d6 100%) repeat 0% 0%;

但还没有完全实现。 acolor 的量都是错误的，我还是不明白其中的逻辑。代码中的百分比到底是什么意思？

谢谢。

Answer 1

百分比是声明颜色开始位置的颜色停止点。但是，如果您有两个相同百分比的色标，则过渡是即时的。 Here's a pretty good article on CSS3 gradients.

首尾颜色不需要百分比的原因：

Note that the first and last color stops don't specify a location; because of that, values of 0% and 100% are automatically assigned to the first and last colors respectively. MDN.

试试下面的代码：

body {
  height: 100vh;
  background-color: red;
  background-image:
    linear-gradient(
      to right, /* direction of the linear-gradient */
      #181817, /* initial color */
      #181817 45%, /* immediate transition to #fafafa */
      #fafafa 45%, /* immediate transition to #fafafa */
      #fafafa 55%, /* immediate transition to #181817 */
      #181817 55% /* immediate transition to #181817 */
    );
}

重复线性渐变中的百分比实际上是如何工作的？

How do percentages in repeating-linear-gradient actually work?

css

linear-gradients