css - css3 repeating-linear-gradient - 得到细粒度的模式？

Question

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

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

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

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

但这完全是蓝色的。

这是一个例子

我究竟做错了什么？

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