纯CSS实现伪随机背景图案

 2016-09-27 16:36

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%;


作者头像

作者:紫铜炉

自由博主,网页设计师。我关注科技产品和个人博客发展,注重用户体验和界面优化。

 发表评论: