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

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

 2016-09-26 16:18    网页设计   安南子   1785    发表评论

我们实现了横纹和竖纹的背景，那么我们再来思考下，如何实现斜纹的呢？

如果我们把这个deg的数值调整成45是不是就可以实现了呢？但结果我们得到这样一个画面：

45°的斜纹理

显然，这不是我们想要的。它是把纹理旋转成了45°角，但是变成了贴片模式。如果你学过美术，那么应该知道有一种重复方式是可以用作45°旋转来做的，那就是把图片贴片这样来画：

好像可以了耶，我们尝试下，把这个扩大看看效果如何：

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

嗯，这个效果还能接受。但我们会发现，我们的线条比横、竖纹要细点，而且有细微的斑点缺角。出现这个原因还是因为我们的勾股原理。如果你要得到一个定值宽度的线条，需要通过勾股法反推算出应该是像素尺寸，我这里举例出现斑点边缘就是因为像素没有精算好。

更好的斜向条纹

我们虽然可以通过贴片的模式来得到协向条纹背景，但需要计算一些比较难受的数值，而且在遇到不规则度数时计算方式就异常的复杂。所以呢，我们走另外一条道路。

一个鲜为人知的真相是linear-gradient()、adial-gradient()有对应的加强版：repeating-linear-gradient()、repeating-radial-gradient()。它们的工作方式和前两者类似，只有一点不同：色标是无限循环重复的，直到填满整个背景。

那么我们就可以不要费力的计算长宽比例而快速的得到一个条纹背景了：

background:repeating-linear-gradient(17.5deg,#fb3,#fb3 15px,#58a 0,#58a 30px);

灵活的同色系条纹

在大多数情况下，我们要求的条纹图案并不是由多种不同颜色组成，而往往属于同一色系。只是在明度上有一点变化。举例来说，我们来看看这个条纹：

它其实是由一个主色调#58a和它的渐色变体所组成的，不过在颜色上，我们进行了数值上的设置区分：

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

那么，我们是不是可以用透明加遮罩的方式来实现呢？答案是肯定的：

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

我们可以按这里思路尝试下，应该可以。现在修改就方便了，我们只要修改一个值就可以来调整背景了。另外，如果你知道美术的色彩叠加效果，那么就可以做出不同式样的效果了。