永远的格子：带有CSS渐变的条纹，格子呢和十字架

The techniques discussed here are somewhat outdated now that SVG equivalents are well-supported in browsers; this article has been left in place for archival purposes.

现在， 浏览器已经很好地支持SVG等效项，因此这里讨论的技术有些过时了。 本文已保留用于存档目的。

Designers tend to think of gradients as smooth distributions of color between two or more hues: black to white with shades of grey between.  But by using color stops that are very close to each other, we can make these transitions far more abrupt in CSS, and provide an easier, more dynamic, smaller (in terms of file size) and faster method for creating backgrounds without images.

设计师倾向于将渐变视为两种或多种色调之间颜色的平滑分布：黑色到白色，中间为灰色阴影。 但是通过使用彼此非常接近的色标，我们可以使这些过渡在CSS中更为突然，并提供一种更轻松，更动态，更小(就文件大小而言)和更快的方法来创建没有图像的背景。

body {
	background: linear-gradient(
		top,
		#aebcbf 0%,
		#6e7774 50%,
		#0a0e0a 51%,
		#0a0809 100%
		);
}

The CSS above produces the effect shown to the right. There are, however, two problems. Because the

background does not have a set size and we have not specified that it repeats, the gradient will default to repeating at intervals of however high the body content is. Even with the body set to min-height: 100%,you would only see the background gradient once. Also, the transition between colors on the edges of the gradient is a little smooth: we want a sharp discontinuity. The solution for the first problem is simple: set a background-size of however large you want a single “tile” of the gradient to be:

background size没有设定，并且我们没有指定重复的背景，因此渐变会默认设置为以较高的身体含量间隔进行重复。 即使将主体设置为min-height: 100%,您也只会看到一次背景渐变。 而且，渐变边缘上的颜色之间的过渡有些平滑：我们想要一个尖锐的不连续性。 第一个问题的解决方案很简单：将background-size设置为您希望渐变的单个“平铺”为多大：

body {
	background: linear-gradient(
		top,
		#aebcbf 0%,
		#6e7774 50%,
		#0a0e0a 51%,
		#0a0809 100%
		);
		background-size: 100px 100px;
}

The second is to place the points at which the colours in the gradient transition

directly on top of each other. Here I’ll use shades of red as contrasting colours, while reducing the size of the tiles:

直接放在彼此的顶部 。 在这里，我将使用红色阴影作为对比色，同时减小瓷砖的尺寸：

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

Creating a plaid pattern is simply a case of using

multiple backgrounds: placing one gradient horizontal and the other vertical, and using rgba values and transparency to allow parts of the first background to show through the second:

多个背景的情况 ：将一个渐变水平放置，将另一个渐变垂直放置，并使用rgba值和透明度使第一个背景的一部分显示到第二个背景：

body {
	background-color: #800;
	background-image:
		linear-gradient(
			rgba(253, 153, 0, 0.5) 0%,
			rgba(253, 153, 0, 0.5) 50%,
			rgba(253, 153, 0, 0.7) 50%,
			rgba(253, 153, 0, 0.7) 100%
			),
		linear-gradient(
			left,
			rgba(253, 153, 0, 0.5) 0%,
			rgba(253, 153, 0, 0.5) 50%,
			rgba(253, 153, 0, 0.7) 50%,
			rgba(253, 153, 0, 0.7) 100%
			);
			background-size: 100px 100px;
}

Unlike images, gradients can be placed on an angle in a background with CSS:

与images不同 ，可以使用CSS在背景中的某个角度放置渐变：

body {
	background-color: #800;
	background-image:
		linear-gradient(
			45deg,
			rgba(0, 0, 0, 0.5) 0%,
			rgba(0, 0, 0, 0.5) 50%,
			rgba(0, 0, 0, 0) 50%,
			rgba(0, 0, 0, 0) 100%
		);
}

Due to the lack of

background-size, we’re seeing an enormous single “tile” of red and dark red at a 45deg angle. Try adding the background-size property to the declaration: it will not lead to the result you might expect.

background-size ，我们看到了45度角处的红色和深红色的巨大“碎片”。 尝试将background-size属性添加到声明中：它不会导致您可能期望的结果。

To make it clearer, we’ll explicitly tell the browser that we are repeating the background gradient:

为了更加清楚，我们将明确告诉浏览器我们正在重复背景渐变：

body {
	background-color: #800;
	background-image:
		repeating-linear-gradient(
			-45deg,
			rgba(0, 0, 0, 0.5),
			rgba(0, 0, 0, 0.5) 12px,
			rgba(0, 0, 0, 0) 12px,
			rgba(0, 0, 0, 0) 15px
			);
	background-size: 22px 22px;
}

Playing around with these values can produce unique and unexpected results, which I explore in greater depth in the

next entry.

在下一篇文章中 ，我将对此进行更深入的探讨。

翻译自: https://thenewcode.com/305/Forever-Plaid-Stripes-Tartans-and-Crosses-With-CSS-Gradients