利用CCS3渐变实现条纹背景

本文摘自《CSS揭秘》中国工信出版集团

难题：

　　不论是在网页设计中，还是在其他传统媒介中（比如杂志和墙纸等），各种尺寸、颜色、角度的条纹图案在视觉设计中无处不在。要想在网页中实现条纹图案，其过程还远远不够理想。通常，我们的方法是创建一个单独的位图文件，然后每次需要做些调整时，都用图像编辑器来修改它。可能有人试过用SVG 来取代位图，但这样还是会有一个独立的文件，而且它的语法也远远不够友好。如果可以直接在CSS 中创建条纹图案，那该有多棒啊！你可能会惊讶地发现，我们居然真的可以。

解决方法:

　　假设我们有一条基本的垂直性渐变，颜色从▇#fb3过渡到▇#58a

background:linear-gradient(#fb3,#58a);

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

background:linear-gradient(#fb3 20%, #58a 80%);

　　现在容器顶部的20%区域被填充为▇#fb3实色，而底部20%区域被填充为▇#58a实色。真正的渐变只出现在容器60%的高度区域。如果我们把两个色标继续拉近（分别改为40%和60%），那真正的渐变区域就变得更窄了。

你是不是开始好奇，如果我们把两个色标重合在一起，会发生什么？

background:linear-gradient(#fb3 50%, #58a 50%);

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

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

background:linear-gradient(#fb3 50%, #58a 50%);
background-repeat: no-repeat;
background-size: 100% 50px;

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

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

background:linear-gradient(#fb3 30%, #58a 30%);
background-size: 100% 50px;

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

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

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

background:linear-gradient(#fb3 30%, #58a 0);
background-size: 100% 50px;

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

background:linear-gradient(#fb3 33.3%, #58a 66.6%,yellowgreen 0);
background-size: 100% 45px;

垂直条纹

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

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

background:linear-gradient(to right,#fb3 50%, #58a 0);
background-size: 50px 100%;

斜向条纹

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

background:linear-gradient(45deg,#fb3 50%, #58a 0);
background-size: 50px 50px;

　　可以发现，这个办法行不通，原因在于我们只是把每个“贴片”内部的渐变旋转了45°，而不是把整个重复的背景都旋转了。试着回忆一下我们以前用位图来生成斜向条纹时是怎么做的吧，做法类似下图：

　　单个贴片包含了四条条纹，而不是两条，只有这样才有可能做到无缝拼接。它正是我们需要在CSS代码中实现的贴片，因此我们需要增加一些色标：

background:linear-gradient(45deg,#fb3 25%, #58a 0, #58a 50%,#fb3 0, #fb3 75%,#58a 0);background-size: 50px 50px;
background-size: 50px 50px;

（图a）

更好的斜向条纹

　　在前面的段落中展示的方法还不够灵活。假设我们想让条纹不是45°而是60°怎么办？或者是30°？又或者是3.14  592 653  5°？如果我们只是把渐变的角度改一下，那么结果看起来会相当糟糕，比如下图中，我们尝试实现60°条纹，但以失败告终。

background:linear-gradient(60deg,#fb3 25%, #58a 0, #58a 50%,#fb3 0, #fb3 75%,#58a 0);background-size: 50px 50px;
background-size: 50px 50px;

　　幸运的是，我们还有更好的办法来创建斜向条纹。一个鲜为人知的真相是linear-gradient() 和radial-gradient() 还各有一个循环式的加强版：repeating-linear-gradient() 和repeating-radial-gradient()。它们的工作方式跟前两者类似，只有一点不同：色标是无限循环重复的，直到填满整个背景。下面是一个重复渐变的例子：

background: repeating-linear-gradient(45deg,#fb3, #58a 50px);

　　它相当于下面这个简单的线性渐变：

background: linear-gradient(45deg,
                   #fb3, #58a 50px,
                   #fb3 50px, #58a 100px,
                   #fb3 100px, #58a 150px,
                   #fb3 150px, #58a 200px,
                   #fb3 200px, #58a 250px,...);

　　重复线性渐变完美适用于条纹效果！这得益于他们可以无限循环的天赋，一个渐变图案就可自动重复并铺满整个背景。因此，我们再也不需要去操心如何创建出无缝拼接的贴片了。

　　做个对比，我们在图a中创建的效果也可以由这个重复渐变来生成：

background: repeating-linear-gradient(45deg,#fb3,#fb3 25px,#58a 0,#58a 50px);

（图b）

　　第一个明显的好处就是减少了重复：我们要改动任何颜色时只需要修改两处，而不是原来的三处。另外一点也很重要，我们现在是在渐变的色标中指定长度，而不是原来的background-size。这里的background-size是初始值，对渐变来说就是以整个元素的范围进行填充。这意味着代码中的长度值更加直观，因为这些长度是直接在渐变轴上进行度量的，直接代表了条纹自身的宽度。

　　不管这还不是最大的好处。最大的好处在于，现在我们可以随心所欲地改变渐变的角度了，指哪儿打哪儿，再也不需要苦苦思索如何生成一个无缝贴片。举例来说，我们苦苦追寻的60°条纹只需这样写即可：

background: repeating-linear-gradient(60deg,#fb3,#fb3 25px,#58a 0,#58a 50px);

　　这简单到只需要改变角度就可以了！请注意，在这个方法中，不论条纹的角度如何，我们在创建双色条纹时都需要用到四个色标。这意味着，我们最好用前面的方法来实现水平或垂直的条纹，而用这种方法来实现斜向条纹。另外，在处理45°条纹时，我们甚至可以把这两种方法结合起来，本质上是通过重复线性渐变来简化贴片的代码：

background: repeating-linear-gradient(45deg,#fb3 0,#fb3 25%,#58a 0,#58a 50%);
background-size: 42.4264px 42.4264px;

灵活的同色系条纹

　　在大多数情况下，我们想要的条纹图案并不是由差异极大的几种颜色组成的，这些颜色往往属于同一色系，只是在明度方面有着轻微的差异。举个例子，我们来看看这个条纹图案：

background: repeating-linear-gradient(30deg,#79b 0,#79b 25px,#58a 0,#58a 50px);

　　在上图中，条纹由一个主色调▇#58a和它的浅色变体所组成的。但是这两种颜色之间的关系在代码中并没有体现出来。此外，如果我们想要改变这个条纹的主色调，甚至需要修改四处！

　　幸运的是，还有一种更好的方法：不在为每种条纹单独指定颜色，而是把最深的颜色指定为背景色，同时把半透明白色的条纹叠加在背景色之上来得到浅色条纹。

background: #58a;
background-image: repeating-linear-gradient(50deg,
                          hsla(0, 0%, 100%, .1),
                          hsla(0, 0%, 100%, .1) 25px,
                          transparent 0, transparent 50px);

　　结果看起来跟上图是一模一样的，但我们现在只需要修改一个地方就可以改变所有颜色了。我们还得到了一个额外的好处，对于那些不支持CSS渐变的浏览器来说，这里的背景色还起到了回退的作用。