css3 重复线性渐变 - 获得细粒度模式？

Question

我想创建一个细粒度的背景图案，在对 Angular 线红线和蓝线之间交替，每条线的宽度只有几个像素。

我不确定我是否理解重复线性渐变的规则

例如你会认为我想要的是这样的:

p {
  width: 100%;
  height: 100%;
  background-image: repeating-linear-gradient(45deg, red 3px, blue 3px)
}

但这完全呈现蓝色。

Here is an example

我做错了什么？

Answer 1

你放在那里的“3px”是从开始的偏移量，而不是从最后一个色标的相对偏移量。

如果你想看到交替的颜色(没有渐变)，你需要一些不同的东西:

body {
    background-image: repeating-linear-gradient(45deg, red 0px, red 3px, blue 3px, blue 6px);
}

渐变以红色开始(red 0px)。然后在接下来的三个像素变为红色(red 3px)。然后变为蓝色(blue 3px)并使接下来的三个像素变为蓝色(blue 6px)。

参见 http://jsfiddle.net/uhB3G/1/ (仅适用于当前的 Firefox，IIRC FF 17+)