当前位置：首页 > article >正文

CSS揭秘：7. 伪随机背景

article 2024/10/25 18:03:33

在这里插入图片描述

前置知识：CSS 渐变，5. 条纹背景，6. 复杂的背景图案

前言

本篇主要内容依然是关于背景的，无限平铺的背景会显得整齐美观，但又有些呆板，如何实现背景的多样性和随机性，是本篇的核心。

一、四种颜色的条纹图案

首先我们用4条不同宽度颜色的条纹来平铺一个背景，初步模拟背景条纹的随机性。

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

在这里插入图片描述

乍一看，这些条纹已经具备了一些随机性的视觉效果，但是也很明显能看出每80px，图片就会开始重复，这个规律很容易被发现。

二、更高的随机性

我们以四种颜色中的其中一个为底色，其他三种颜色作为条纹。再将三个条纹以不同的间隔进行平铺，就可以得到更加”随机“的条纹背景。

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%;

在这里插入图片描述

如果不标记出来，我们目前应该比较难去分辨出平铺的图案连接处了。
如上代码，我们将三个条纹分别以 80px 60px 40px 的宽度平铺在纯色背景上，相当于三张不同尺寸图片平铺叠加在一起。那么如果我们想找到每次重复起始的点，其实就是找到 80 60 40 的最小公倍数。

在这里插入图片描述

为了便于理解，我将各条纹图片拆分出来：

背景：background: hsl(20, 40%, 90%);
条纹一：橙色条纹以 10px 的宽度，（80 - 10）70px 的间距平铺。

background-image: 
	linear-gradient(90deg, #fb3 10px, transparent 0); 
background-size: 80px 100%;

条纹二：绿色条纹以 20px 的宽度，（60 - 20）40px 的间距平铺。

background-image: 
	linear-gradient(90deg, #ab4 20px, transparent 0); 
background-size: 60px 100%;

条纹三：棕色条纹以 20px 的宽度，（40 - 20）20px 的间距平铺。

background-image: 
	linear-gradient(90deg, #655 20px, transparent 0); 
background-size: 40px 100%;

[图片]

小结

根据我们上面实践的方法，我们可以发现，平铺的图片越大，越难以被发现重复性。那么根据我们得出平铺图片的起点是根据三者的最小公倍数得来的可以得出，我们需要给出的3个条纹尺寸，最好都是质数，只有质数之间的最小公倍数最大，这样可以更容易让平铺的图片变大。

CSS揭秘：7. 伪随机背景

前言

一、四种颜色的条纹图案

二、更高的随机性

小结

相关阅读

相关文章：