纯CSS实现伪随机背景图案

纯CSS实现伪随机背景图案

 2016-09-27 16:36    网页设计   标签：css   951    发表评论

CSS不像其他的语言，它没有随机函数这个方案，但我们在做一些背景图案的时候希望它能更真实好看点，有点随机感，就像这样：

想实现这样的效果我们还需要一步步开始做。

我们的第一个想法应该是创建一个具有四种颜色的条纹图案：

background:linear-gradient(90deg,
    #fb3 15%,#655 0,#655 40%,
    #ab4 0,#ab4 65%,hsl(20,40%,90%) 0);
background-size:80px 100%;

这个问题一看就十分明显，因为background-size就是一个重复值，它代表的意思就是每80px重复一次贴片的覆盖。

我们换个思路，如果不是重复，而这四种颜色每个都是一个层呢（就像PS里面的分层一样），然后把这些层进行不规则的覆盖叠加。

background:hsl(20,40%,90%);
background-image:
    linear-gradient(90deg,#fb3 10px,transparent 0),
    linear-gradient(90deg,#ab4 20px,transparent 0),
    linear-gradient(90deg,#655 20px,transparent 0);
background-size:80px 100%,60px 100%,40px 100%;

眼尖的朋友可能会发现，这个是有点重复的效果，但达到一定的数值时还是能看出重复？

在哪儿重复呢？我可以告诉你，在240px宽的地方。

我们初中时学过一个叫最小公倍数(LCM)。我们这里虽然在重复，但40、60、80的最小公倍数是240，随意图象在240px的时候就会出现重复。解决方法也很简单，我们要把这个最小公倍数调大，那么就很难发觉重复了。多大呢？问“相对质数”！

举例来说，3、4、5是相对质数，它们的最小公倍数是3X4X5=60。那么，我们应该找些更大的相对质数来设置我们的值，这样就看不出重复了！别忘记了，竖纹的宽度最好也随之调整下：

background:hsl(20,40%,90%);
background-image:
    linear-gradient(90deg,#fb3 11px,transparent 0),
    linear-gradient(90deg,#ab4 23px,transparent 0),
    linear-gradient(90deg,#655 41px,transparent 0);
background-size:41px 100%,61px 100%,83px 100%;