阅读CSS Secrets（六）

(伪随机背景)

随机的背景比有规则的背景看起来更加自然，然而如何去制作随机背景呢。

首先做一个四色条纹

div{
  width:200px;
  height:100px;
  background-image:linear-gradient(90deg,#fb3 15%,#655 0,#655 40%,#ab4 0,#ab4 65%,hsl(20,40%,90%) 0);
  background-size:80px 100%;
}

这是一个重复的条纹，每80px重复一次，那我们怎么改变会更加好看呢

1.png

方法一

通过几天多数量条纹，然后不同条纹重复的单位尺寸不相同，制造一种假象的随机条纹。
关于条纹的覆盖问题：写在最前面的条纹优先显示，写在越后面的条纹越有可能被前面的条纹覆盖

div{
  width:200px;
  height:100px;
  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%;
}

这图看起来随机，但其实当width足够大时，他还是重复的，240px为一段，因为80px 60px 40px 最小公倍数为240px。所以到240px 时还是会重复。

2.png

如何去实现最小化的重复呢，只要我们将最小公倍数为足够大时，重复度就会很低，比如把3个宽度设置为41 61 81 ，只要41*61无法整出 81，则他们的最小公倍数就会变的很大，我们的背景条纹就很难重复。
相当于创建了一个伪随机背景