CSS之伪随机背景

前面文章中有说到渐变实现条形背景，如下：

div{
    width: 600px;
    height: 200px;
}
.grad-03{
    background: linear-gradient(90deg,orange 15%,yellowgreen 0,yellowgreen 40%,brown 0, brown 65%,transparent 0),pink;
    background-size: 80px 100%;
}

可以看到，上面的图片按照我们代码中的渐变有规律的四个条纹重复，也就是80px重复一次。
但是很多时候，我们可能不需要这么规律的，我们需要随机的、比较自然的，有什么好方法来解决吗？

既然我们用background-size 来控制条纹的宽度，那么我们尝试下，代码和效果如下：

.grad-01{
    background: linear-gradient(90deg,orange 15%,transparent 0),
                linear-gradient(90deg,yellowgreen 40%,transparent 0),
                linear-gradient(90deg,brown  65%,transparent 0),
                pink;
    background-size: 80px 100%,60px 100%,40px 100%;
}

我们仍然可以看到，图片以每240px的间距重复，是怎么回事呢？
为什么是240px重复呢？它其实是80px、60px、40px的最小公倍数，那按照这样的规律，我们只要设法让他们的最小公倍数足够大就行。只要他们互质，那他们的最小公倍数就最大。

按照上面的设想，我们尝试的代码和效果如下：

.grad-01{
    background: linear-gradient(90deg,orange 15%,transparent 0),
                linear-gradient(90deg,yellowgreen 40%,transparent 0),
                linear-gradient(90deg,brown  65%,transparent 0),
                pink;
    background-size: 81px 100%,61px 100%,41px 100%;
}

从上图看到，整个渐变看不到重复，因为81、61、41的最小公倍数为207583，比我们的任何分辨率都要大，因此看不到重复，得到了我们想要的结果。

用质数来实现随机真实性被称为蝉元则