大家好，今天要跟大家分享的是如何通过纯CSS代码的方法来实现各种条纹背景（如下图所示）。

通常情况下很多人在网页中需要条纹背景时，都会使用一些制图软件通过制作位图的方式在网页中引用，但是日后我们需要修改网页时就比较麻烦，还要在重复一遍起初的制图过程重新制作符合需要的位图，那么如果我们通过纯CSS代码的方法来实现的话，后期网站维护起来就会轻松很多。

知识点：线性渐变linear-gradient()

水平条纹

首先我们看一个最简单的水平渐变

div{
 width:1000px;
 height:600px;
 background:linear-gradient(#fb3,#58b);
}

在这段代码中其实存在两个省略掉的默认样式：一个是渐变的方向（默认：to bottom)，另一个是颜色渐变起止的位置（默认：黄色从0%的位置向下，蓝色从100%的位置向上，在中间50%的地方渐变同时结束融合在一起），所以上面的背景代码其实是这样的：

background：linear-gradient(to bottom, #fb3 0%,#fb3 50%, #58b 100%, #58b 50%);

既然颜色渐变的起止位置可以设定，那么我们可以将两种颜色开始渐变和结束渐变的位置都设在背景50%的中间位置，这样两种颜色还没开始渐变就结束了，其结果如下图：变成只有两块实色，各占一半面积。

background：linear-gradient(to bottom, #fb3 50%,#fb3 50%, #58b 50%, #58b 50%);

可以简写为：

background：linear-gradient( #fb3 50%, #58b 50%);

掌握了这个技巧后，我们试着在拓展一下，如果将两种颜色渐变开始的位置设在30%处会是什么样子呢？结果如下图所示：

background：linear-gradient( #fb3 30%, #58b 30%);

我们可以看到这样做的结果是蓝色占据了70%的面积，黄色占据了30%的面积，因此我们可以通过这种方法来创建不等宽的条纹，只需要根据需要调整位置值即可，如下图：

接着，要想实现示例中的条纹背景效果，只需通过background-size简单调整一下尺寸就OK了，比如我们添加这样一段代码：

background-size:100% 100px;

效果就变成下图所示的样子

之所以会变成这个样子是因为背景在默认情况下是重复平铺的，如果background设置成no-repeat，它的真实效果是下图这样的：

如果要创建超过两种颜色的条纹，只需要依次设置好渐变的起止位置即可，下面的代码可以生成三种颜色的水平条纹：

background:

linear-gradient(#fb3 33.3%, #58a 33.3%, #58a 66.6%, yellowgreen 66.6%);

background-size:100% 100px;

垂直条纹

理解了水平条纹后，垂直条纹就简单多了，两者几乎一样，只需将上面的代码稍微改动两处即可实现

一个是渐变的方向，改为to right，另一个是background-size的值，将高度设为100%，宽度调为合适的值

background:

linear-gradient(to right,#fb3 33.3%, #58a 33.3%, #58a 66.6%, yellowgreen 66.6%);

background-size:100px 100%;

斜向条纹

同样，根据上面的经验，我们通过改变相应的参数便可以实现斜向条纹，但是会有些麻烦，比如确定宽度，指定不同的角度等都会带来相应的问题，不建议采用，这里也不过多赘述，感兴趣的同学可以自行去探索。

这里我们采用一种简单方法来创建，即通过repeating-linear-gradient（）来实现，下面这段代码便可以生成一个简单的斜向条纹背景：

background:repeating-linear-gradient（

45deg, #fb3 0,#fb3 50px,#58a 50px,#58a 100px）;

这样只要确定好角度，然后分别设置每种颜色起始位置和终止位置即可，让后其会自动填充，如果需要三种颜色在后面继续添加就可以了，如下所示：

background:repeating-linear-gradient（

45deg, #fb3 0,#fb3 50px,#58a 50px,#58a 100px，red 100px,red 150px）;

今天就介绍到这里，感兴趣的同学赶紧试试吧，如果发现本教程存在什么问题或有什么不足还望多多指正。

本文由“国外那点儿事”发布，2017年6月12日