持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第2天，点击查看活动详情

CSS 条纹背景秘探

要想在网页中实现条纹图案，通常，我们的方法是创建一个单独的位图文件，然后每次需要做些调整时，都用图像编辑器来修改它。可能有人试过用 SVG 来取代位图，但这样还是会有一个独立的文件，而且它的语法也远远不够友好。那么如何直接在 CSS 中创建条纹图案呢？

首先我们要先介绍 CSS 线性渐变，background-size。

CSS 线性渐变

线性渐变创建了一条沿直线前进的颜色带。

要创建最基本的渐变类型，您只需指定两种颜色即可。这些被称为色标。至少指定两个色标，也可以指定任意数量。

.simple-linear {
  background: linear-gradient(blue, pink);
}

当然我们也可以改变渐变方向。

默认情况下，线性渐变的方向是从上到下，你可以指定一个值来改变渐变的方向。

.horizontal-gradient {
  background: linear-gradient(to right, blue, pink);
}

你甚至可以设置渐变方向为从一个对角到另一个对角。

.diagonal-gradient {
  background: linear-gradient(to bottom right, blue, pink);
}

同时还能设置渐变角度。

如果你想要更精确地控制渐变的方向，你可以给渐变设置一个具体的角度。

.angled-gradient {
  background: linear-gradient(70deg, blue, pink);
}

在使用角度的时候, 0deg 代表渐变方向为从下到上， 90deg 代表渐变方向为从左到右，诸如此类正角度都属于顺时针方向。而负角度意味着逆时针方向。

当然也可以设置颜色终止位置。

你不需要让你设置的颜色在默认位置终止。你可以通过给每个颜色设置0，1%或者2%或者其他的绝对数值来调整它们的位置。如果你将位置设置为百分数， 0% 表示起始点, 而100%表示终点，但是如果需要的话你也可以设置这个范围之外的其他值来达到你想要的效果。如果有些位置你没有明确设置，那么它将会被自动计算，第一种颜色会在0%处停止，而最后一种颜色是100%，至于其他颜色则是在它邻近的两种颜色的中间停止。

.multicolor-linear {
   background: linear-gradient(to left, lime 28px, red 77%, cyan);
}

background-size

background-size 设置背景图片大小。图片可以保有其原有的尺寸，或者拉伸到新的尺寸，或者在保持其原有比例的同时缩放到元素的可用空间的尺寸。

语法

background-size: length|percentage|cover|contain;

值	描述
length	设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为 auto(自动)
percentage	将计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为"auto(自动)"
cover	此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。
contain	此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。

实现条纹

假设我们有一条基本的垂直线性渐变，颜色从 red 过渡到 blue：

background: linear-gradient(red, blue);

现在，让我们试着把这两个色标拉近一点：

background: linear-gradient(red 20%, blue 80%);

现在容器顶部的 20% 区域被填充为 red 实色，而底部 20% 区域被填充为 blue 实色。真正的渐变只出现在容器 60% 的高度区域。如果我们把两个色标继续拉近（分别改为 40% 和 60%），那真正的渐变区域就变得更窄了。你是不是开始好奇，如果我们把两个色标重合在一起，会发生什么？

background: linear-gradient(red 50%, blue 50%);

“如果多个色标具有相同的位置，它们会产生一个无限小的过渡区域，过渡的起止色分别是第一个和最后一个指定值。从效果上看，颜色会在那个位置突然变化，而不是一个平滑的渐变过程。”

你在上图中可以看到，已经没有任何渐变效果了，只有两块实色，各占据了 background-image 一半的面积。本质上，我们已经创建了两条巨大的水平条纹。

因为渐变是一种由代码生成的图像，我们能像对待其他任何背景图像那样对待它，而且还可以通过 background-size 来调整其尺寸：

background: linear-gradient(red 50%, blue 50%);
background-size: 100% 30px;

在上图中可以看到，我们把这两条条纹的高度都缩小到了 15px。由于背景在默认情况下是重复平铺的，整个容器其实已经被填满了水平条纹。

我们还可以用相同的方法来创建不等宽的条纹，只需调整色标的位置值即可：

background: linear-gradient(red 30%, blue 30%);
background-size: 100% 30px;

为了避免每次改动条纹宽度时都要修改两个数字，我们可以再次从规范那里找到捷径。

“如果某个色标的位置值比整个列表中在它之前的色标的位置值都要小，则该色标的位置值会被设置为它前面所有色标位置值的最大值。”

这意味着，如果我们把第二个色标的位置值设置为 0，那它的位置就总是会被浏览器调整为前一个色标的位置值，这个结果正是我们想要的。因此，下面的代码会产生跟上图完全一样的条纹背景。

background: linear-gradient(red 30%, blue 0);
background-size: 100% 30px;

如果要创建超过两种颜色的条纹，也是很容易的。举例来说，下面的代码可以生成三种颜色的水平条纹。

background: linear-gradient(red 33.3%,
            blue 0, blue 66.6%, yellow 0);
background-size: 100% 45px;

垂直条纹

水平条纹是最容易用代码写出来的，但我们在网页上看到的条纹图案并不都是水平的。有些条纹是垂直的，而且某些形态的斜条纹或许更受欢迎，或者看起来更加有趣。幸运的是，CSS 渐变同样也能帮助我们创建出这些效果，只是难度稍有不同。

垂直条纹的代码跟水平条纹几乎是一样的，差别主要在于：我们需要在开头加上一个额外的参数来指定渐变的方向。在水平条纹的代码中，我们其实也可以加上这个参数，只不过它的默认值 to bottom 本来就跟我们的意图一致，于是就省略了。最后，我们还需要把 background-size 的值颠倒一下，原因应该不用多说了吧：

background: linear-gradient(to right, /* 或 90deg */
            #fb3 50%, #58a 0);
background-size: 30px 100%;

斜向条纹

在完成了水平和垂直条纹之后，我们可能会顺着往下想：如果我们再次改变 background-size 的值和渐变的方向，是不是就可以得到斜向（比如 45°）的条纹图案呢？比如这样：

background: linear-gradient(45deg, red 50%, blue 0);
background-size: 30px 30px;

可以发现，这个办法行不通。原因在于我们只是把每个“贴片”内部的渐变旋转了 45°，而不是把整个重复的背景都旋转了。我们需要在 CSS 代码中重新实现的贴片，因此我们需要增加一些色标：

background: linear-gradient(45deg,
             red 25%, blue 0, blue 50%,
             red 0, red 75%, blue 0);
background-size: 30px 30px;