css背景渐变_具有CSS渐变的更多背景图案

css背景渐变

There are many variants on the CSS3 gradient technique that we discussed in the previous article. At the simplest level, you could overlay a gradient with the "fade" effect of another gradient on top:

我们在上一篇文章中讨论了CSS3渐变技术的许多变体。 在最简单的层次上，您可以将渐变与另一个渐变的“淡入淡出”效果叠加在顶部：

45°褪色条纹 (45° Stripe With Fade)

body {
	margin: 0;
	background-color: #000;
	background-image: linear-gradient(
		to bottom,
		rgba(0, 0, 0, 0),
		rgba(0, 0, 0, 1) 50%),
	repeating-linear-gradient(
		45deg,
		rgba(0, 238, 170, 0.5), 
		rgba(0, 238, 170, 0.5) 12px,
		rgba(0, 0, 0, 0) 12px,
		rgba(0, 0, 0, 0) 15px
		);
		background-size: cover, 22px 22px;
}

By playing around with angles, background size, position and stops, it's possible to produce a wide variety of patterns:

通过玩转角度，背景大小，位置和光圈，可以产生各种各样的图案：

锯齿 (Sawtooth)

body {
	background-image:
		linear-gradient(
			45deg,
			#500 0%, 
			#500 50%, 
			#300 50%, 
			#300 100%
			);
	background-size: 50px 100px;
}

蓝图 (Blueprint)

body { 
	background-color:#269;
	background-image: 
		linear-gradient(
			white 2px,
			transparent 2px
			),
		linear-gradient(
			0,
			white 2px,
			transparent 2px
			),
		linear-gradient(
			rgba(255,255,255,.3) 1px, 
			transparent 1px
			),
		linear-gradient(
			0,
			rgba(255,255,255,.3) 1px,
			transparent 1px
			);
}

Credit is again due to Lea Verou for originally discovering this technique, most especially the Blueprint pattern.

再次归功于Lea Verou最初发现了这项技术，尤其是Blueprint模式。

翻译自: https://thenewcode.com/306/More-Background-Patterns-With-CSS-Gradients

css背景渐变