2-7 随机背景

知识储备

1.上一小节的linear-gradient

小测试

1.最简单的做法

html

css

li:nth-child(1){ 
   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重复的条纹

这些不是很复杂的规律一眼就能看出来，我们需要更加随机的效果，用于制造某些纹理，例如木纹

思考：作者lea在这里引入了一个概念 ，利用 质数的最小公倍数 来模拟一个随机的效果

示例代码：
css

li:nth-child(2){  
  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: 81px 100%,61px 100%,41px 100%;}

结果：
最小公倍数= 81 x 61 x 41 = 202581px

像极了的随机背景图