CSS实现横纹、竖纹、斜纹渐变条纹背景的方法(上)

CSS实现横纹、竖纹、斜纹渐变条纹背景的方法(上)

 2016-09-26 09:17    网页设计   安南子   5615    发表评论

CSS发展到今天，关于网站背景已经不仅仅局限于单色的。现在渐变色彩已经很成熟了，我们只要稍微加以利用，那么就可以实现出不同的效果。《CSS》揭秘作者就通过代码的形式写出了各式各样的CSS背景代码，大家可以查阅下。

横向条纹背景

首先我们需要明白条纹背景是怎么来的？

回答这个问题，我们来看下渐变背景。如果你理解linear-gradient，那么上面这个图像就很好绘制出来。这就是最基本的渐变：

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

现在我们试试把中间那个灰色部分拉近一点看看效果如何：

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

好像是有效果了，那么我们再拉近点，让这部分重合吧：

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

事实上，我们已经做出了两个巨大的横纹，因为我们把过渡部分最小化了，实现了一个基本上肉眼无法查看的过渡效果，所以就变成了上图中的式样。但现在的问题是我们要的不仅仅是两条线，我们要条纹的，那么我们就可以用background-size来实现。

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

如果要创建超过两种颜色的条纹，也是很容易的。只要生成三种颜色的水平条纹即可。不过我们需要先明白这样一句话：

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

——CSS图像(第三版)

要明白这句话，我们看这个例子。正常情况下，背景的渐变顺序是按从0→100%的顺序来写的，但如果你将中间过渡值(60%)设置少于之前的值(30%)，那么背景就会在30%的时候不产生渐变，从而形成一个直接拼合的模式。这就出现了无渐变模式。通常，我们为达到这种效果就会使用数值0带代替。

正常的渐变模式

background:linear-gradient(#fb3 30%,#58a 60%,#680 90%,);

更改了中间量的模式

background:linear-gradient(#fb3 30%,#58a 0,#680 90%,);

那么，我们的三条纹模式就可以这样来实现了：

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

竖向条纹背景

我们会写了横的，那么竖纹背景也很简单了，只要在linear-gradient上增加一个参数就可以了。

background:linear-gradient(to right,/* 或90deg */
                            #fb3 33.3%,#58a 0,#58a 66.6%,yellowgreen 0);
background-size:25% 60px;