html背景图片随机天天一个CSS小技能伪随机配景

这里我们想得到不同颜色和不同宽度的垂直条纹，并且不能让人看到贴片平铺时的“接缝”。

一开始的想法可能是这样的：

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .box{ width: 320px; height: 320px; background: linear-gradient(90deg, #fb3 15%, #655 0, #655 40%, #ab4 0, #ab4 65%, hsl(20, 40%, 90%) 0); background-size: 80px 100%; } </style></head><body> <div class="box"></div></body></html>

html背景图片随机天天一个CSS小技能伪随机配景 jQuery

这里我们可以看到，这个重复规律是非常明显的，由于渐变图案每隔80px就重复一次，anything better?

方案

为了更真实地仿照条纹的随机性，我们可能会想到，把这些条纹分拆成多个图层，一个作为背景，其他作为条纹，然后让这些条纹按照不同的间隔进行平铺。

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就会重复一次。
同时我们这可以看到240是40，60，80的最小公倍数。

根据这个逻辑，我们要让这种随机性更加真实，我们得吧贴片的尺寸最大。
也便是让最小公倍数最大，超过随意马虎的大小。

为了让最小公倍数最大，这些数字最好是“相对质数”（数字间没有公约数）。
最大略的办法便是只管即便选择质数，因此质数跟其他任意数字都是相对质数。
因此我们把代码改为：
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: 83px 100%, 61px 100%, 41px 100%;
现在平铺贴片的尺寸是83x61x41 = 207583px，比任何想象的出的屏幕都大。