@伪随机背景
2017-02-12 本文已影响0人
Yuxin_Liu
娃娃将近半个月没有写博客，甚是不爽。
与此同时，墨鱼丸也懒得要命，使劲儿胖，胖成了一条海参。
伪随机背景用法很巧妙，这一节的目的就是想让条纹背景当中的条纹“不规律”滴出现，至少在有限长度（或宽度）范围内你是看不出来的。
拿四色条纹来说，摘出来一个作为底色，另外三个重复出现的频率不一样（用background-size来控制），比如这样写：
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%;
这里面的规律是：#fb3的宽度为10px，每隔80px出现一次；#ab4宽度为20px，每隔60px出现一次；#655宽度为20px，每隔40px出现一次。（但它有时候比较苦逼，就是该当它出现的时候有可能会被#fb3和#ab4覆盖一部分或全部，所以这时候你是看不到它的）同时，根据linear-gradient的顺序来排他们显示的优先级。
however！（however又来了。。。）
background-size的值如果看起来很nice的话，条纹显示的随机性会减弱的。
而每隔240px（40px、60px、80px的最小公倍数），红框的部分就会再一模一样滴显示一遍出来。
就像酱紫：
CSS Secrets @伪随机背景 - CSS娃娃 - CSS娃娃的博客
那怎么办呢？
那就让最小公倍数无限大（所谓的“禅原则”），可视范围内红框就不重复出现啦~
比如把80px、60px、40px分别改成41px、61px、83px，而他们的最小公倍数为207583...我保证你绝对不会看到重复的红框框！
background-size: 41px 100%, 61px 100%, 83px 100%;
酱~ done~
CSS Secrets @伪随机背景 - CSS娃娃 - CSS娃娃的博客
