1

赤と青の対角線が交互に並ぶ細かい背景パターンを作成したいと思います。それぞれの幅はわずか数ピクセルです。

線形グラデーションの繰り返しのルールを理解しているかどうかわかりません

たとえば、私が欲しいのは次のようなものだと思うでしょう：

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

しかし、それは完全に青になります。

ここに例があります

私は何を間違っていますか？

4

1 に答える 1

1

そこに配置した「3px」は、最後のカラーストップからの相対オフセットではなく、開始からのオフセットです。

交互の色 (グラデーションなし) を見たい場合は、別のものが必要になります。

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

グラデーションは赤 ( red 0px) から始まります。次に、次の 3 ピクセルを赤にします ( red 3px)。次に、青 ( blue 3px) に変更し、次の 3 つのピクセルを青 ( blue 6px) にします。

http://jsfiddle.net/uhB3G/1/を参照してください(現在の Firefox、IIRC FF 17+ でのみ動作します)。

于 2013-02-05T21:31:46.363 に答える