css3重复线性渐变 - 获得细粒度图案？

Question

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

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

例如，您会认为我想要的是这样的：

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 +）