CSS3 繰り返しグラデーション 背景に線を入れます。

繰り返しグラデーション　赤い背景に横線を入れます。

background-color:rgb(255,0,0);
background-image:
		repeating-linear-gradient(/*繰り返す*/
			to bottom,
			rgb(255,0,0)0px, /*0~1px赤*/
			rgb(255,0,0)1px, 
			rgb(200,0,0)1px,/*1~2px濃い赤*/
			rgb(200,0,0)2px/*最後はカンマは要りません*/
		);

ハッチングパターンを作ってみる。
透明を使って、クロスしたような模様になります。
斜めにすると1pxではがたがたになってきれいに見えないので2pxずつにします。

hsl青240度、彩度100%=純色　　l=明るさ50%が純色。hsbのbブライトネスは100%が純色です。
意味は同じようなものですが、指定する数値が違ってきます。

	background-color:hsla(240,100%,50%,0.9);
	background-image:
		repeating-linear-gradient(
			/*左上から斜めに線*/
			45deg,
			hsla(240,100%,50%,0.5)0px,
			hsla(240,100%,50%,0.5)2px,
			hsla(240,100%,80%,0.5)2px,
			hsla(240,100%,80%,0.5)4px
		),
		repeating-linear-gradient(
			/*右上から斜めに線  マゼンダにしてみた。青とピンクを重ねて紫っぽくした。*/
			135deg,/*斜めにすると1pxではがたがたになってきれいに見えないので2pxずつとっています。*/
			hsla(240,100%,50%,0.5)0px,
			hsla(240,100%,50%,0.5)2px,
			hsla(240,100%,80%,0.5)2px,
			hsla(240,100%,80%,0.5)4px
		);