纯 CSS 随机数：利用素数多重背景重复实现的伪随机噪声 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

纯 CSS 随机数：素数多重背景重复实现的伪随机噪声

大家好！今天我们要探讨一个非常有趣且略带hack性质的话题：如何仅使用 CSS 实现伪随机噪声。通常情况下，我们会认为随机数生成是 JavaScript 的专属领域，但通过巧妙地利用 CSS 的多重背景和素数特性，我们可以创造出一种视觉上近似随机的图案。

伪随机噪声的意义

在前端开发中，伪随机噪声有着广泛的应用，例如：

视觉效果增强： 为网页添加微妙的纹理或动画，增加视觉层次感和趣味性。
数据可视化： 用于生成散点图或其他需要随机分布的数据展示。
密码学相关应用： 虽然 CSS 生成的随机数安全性不高，但在某些轻量级的应用场景下可以起到一定的混淆作用。
创造性实验： 为 CSS 艺术和动画提供新的可能性。

核心原理：素数与背景重复

这个技术的核心在于利用素数之间的非公倍数关系，以及 CSS 的 background-repeat 属性。简单来说，我们创建多个具有不同尺寸和颜色的背景图像，并以素数作为它们的重复间隔。由于素数之间几乎没有公倍数，这导致这些背景图像在视觉上产生一种看似随机的叠加效果。

1. 素数的选择：

选择一组合适的素数非常重要。理想情况下，这些素数应该足够大，以避免明显的重复模式，同时也应该相对接近，以便在视觉上产生更密集的噪声。常用的素数范围在 100 到 500 之间。

2. 多重背景的叠加：

CSS 允许我们为一个元素设置多个背景图像。我们可以为每个背景图像指定不同的颜色、尺寸和重复方式。通过将这些背景图像叠加在一起，我们可以创造出复杂的视觉效果。

3. background-repeat 的妙用：

background-repeat 属性控制背景图像的重复方式。我们可以使用 repeat-x、repeat-y、repeat（同时在水平和垂直方向重复）或 no-repeat。在这里，我们将主要使用 repeat，并结合素数作为背景图像的尺寸，以产生伪随机的效果。

实现步骤与代码示例

下面我们将逐步演示如何使用 CSS 实现伪随机噪声：

步骤 1：HTML 结构

首先，我们需要一个 HTML 元素来应用我们的 CSS 样式。这里我们使用一个 div 元素：

<div class="noise"></div>

步骤 2：CSS 样式

接下来，我们为 noise 类添加 CSS 样式。这里我们选择五个素数：101, 103, 107, 109, 113，并为每个素数创建一个背景图像。

.noise {
  width: 500px;
  height: 300px;
  background-color: #fff; /* 设置一个白色背景，以便更好地观察噪声 */
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.05) 101px, transparent 101px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.03) 103px, transparent 103px),
    linear-gradient(rgba(0, 0, 0, 0.07) 107px, transparent 107px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.02) 109px, transparent 109px),
    linear-gradient(rgba(0, 0, 0, 0.04) 113px, transparent 113px);
  background-size: 101px 101px, 103px 103px, 107px 107px, 109px 109px, 113px 113px;
}

代码解释：

width 和 height 定义了噪声区域的尺寸。
background-color 设置了背景颜色，这里设置为白色，方便观察噪声效果。
background-image 使用了五个 linear-gradient 函数来创建五个不同的背景图像。每个 linear-gradient 创建一个从半透明黑色到透明的线性渐变，其长度由对应的素数决定。
background-size 设置了每个背景图像的尺寸，与对应的素数相等。这确保了背景图像以素数间隔重复。

步骤 3：优化与调整

上述代码已经可以生成一个基本的伪随机噪声，但我们可以通过调整以下参数来优化效果：

透明度： 调整 rgba() 函数中的透明度值，可以控制噪声的强度。
颜色： 改变 rgba() 函数中的颜色值，可以改变噪声的颜色。
素数选择： 尝试不同的素数组合，可以改变噪声的视觉模式。
背景尺寸： 尝试调整 background-size 的值，观察噪声的变化。

更高级的例子：添加颜色变化和动画

.colorful-noise {
  width: 500px;
  height: 300px;
  background-color: #f0f0f0;
  background-image:
    linear-gradient(rgba(255, 0, 0, 0.1) 101px, transparent 101px), /* 红色 */
    linear-gradient(90deg, rgba(0, 255, 0, 0.05) 103px, transparent 103px), /* 绿色 */
    linear-gradient(rgba(0, 0, 255, 0.08) 107px, transparent 107px), /* 蓝色 */
    linear-gradient(90deg, rgba(255, 255, 0, 0.03) 109px, transparent 109px), /* 黄色 */
    linear-gradient(rgba(255, 0, 255, 0.06) 113px, transparent 113px); /* 品红色 */
  background-size: 101px 101px, 103px 103px, 107px 107px, 109px 109px, 113px 113px;
  animation: noise-anim 5s linear infinite;
}

@keyframes noise-anim {
  0% { background-position: 0 0, 0 0, 0 0, 0 0, 0 0; }
  100% { background-position: 101px 101px, 103px 103px, 107px 107px, 109px 109px, 113px 113px; }
}

代码解释：

我们为每个 linear-gradient 设置了不同的颜色，使得噪声更加丰富多彩。
animation 属性应用了一个名为 noise-anim 的动画。
@keyframes noise-anim 定义了动画的关键帧，通过改变 background-position 属性，使得背景图像产生移动的效果，从而增强了噪声的动态性。

优势与局限性

优势：

纯 CSS： 不需要 JavaScript，完全依靠 CSS 实现，降低了代码复杂度和维护成本。
性能良好： 相对于 JavaScript 生成的随机数，CSS 实现的伪随机噪声通常具有更好的性能，尤其是在处理大量元素时。
声明式： CSS 的声明式特性使得代码更加简洁易懂。
易于修改： 通过简单地修改 CSS 样式，可以轻松地调整噪声的视觉效果。

局限性：

非真正的随机： 这种方法生成的是伪随机噪声，其随机性受到素数选择和背景图像尺寸的限制。对于需要高安全性的随机数应用场景，这种方法并不适用。
有限的可定制性： 相对于 JavaScript，CSS 在生成随机数方面的灵活性较差。难以实现复杂的随机数生成算法。
浏览器兼容性： 虽然现代浏览器都支持多重背景，但在某些旧版本浏览器中可能存在兼容性问题。

应用场景举例

1. 网页背景纹理：

我们可以将伪随机噪声作为网页的背景纹理，增加视觉层次感。

body {
  background-color: #f0f0f0;
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.05) 101px, transparent 101px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.03) 103px, transparent 103px),
    linear-gradient(rgba(0, 0, 0, 0.07) 107px, transparent 107px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.02) 109px, transparent 109px),
    linear-gradient(rgba(0, 0, 0, 0.04) 113px, transparent 113px);
  background-size: 101px 101px, 103px 103px, 107px 107px, 109px 109px, 113px 113px;
}

2. 按钮 hover 效果：

我们可以为按钮添加一个微妙的 hover 效果，当鼠标悬停在按钮上时，显示伪随机噪声。

.button {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
}

.button:hover {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.1) 101px, transparent 101px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 103px, transparent 103px),
    linear-gradient(rgba(255, 255, 255, 0.15) 107px, transparent 107px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 109px, transparent 109px),
    linear-gradient(rgba(255, 255, 255, 0.08) 113px, transparent 113px);
  background-size: 101px 101px, 103px 103px, 107px 107px, 109px 109px, 113px 113px;
}

3. 卡片背景装饰：

我们可以将伪随机噪声作为卡片的背景装饰，增加卡片的视觉吸引力。

.card {
  width: 300px;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #fff;
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.03) 101px, transparent 101px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.01) 103px, transparent 103px),
    linear-gradient(rgba(0, 0, 0, 0.05) 107px, transparent 107px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.01) 109px, transparent 109px),
    linear-gradient(rgba(0, 0, 0, 0.02) 113px, transparent 113px);
  background-size: 101px 101px, 103px 103px, 107px 107px, 109px 109px, 113px 113px;
}

替代方案

当然，除了使用素数和多重背景，还有其他方法可以利用 CSS 实现类似的噪声效果：

noise() 函数 (CSS Houdini): 如果你追求更高级和可控的随机数生成，可以考虑使用 CSS Houdini。通过自定义 paint() 函数，你可以编写 JavaScript 代码来生成真正的随机数，并在 CSS 中使用它。但是，Houdini 的兼容性目前还不是很好。
SVG 滤镜: 使用 SVG 的 <feTurbulence> 滤镜可以生成非常逼真的噪声效果。这种方法的优点是可定制性强，缺点是代码相对复杂。
预生成的噪声图像: 你可以使用图像编辑软件（如 Photoshop 或 GIMP）预先生成噪声图像，然后在 CSS 中将其作为背景图像使用。这种方法的优点是简单直接，缺点是需要额外的图像资源。

实践中需要考虑的事项

性能: 虽然 CSS 噪声通常比 JavaScript 噪声性能更好，但过多的背景层和动画仍然会影响性能。因此，请谨慎使用，并进行性能测试。
可访问性: 确保噪声不会干扰网页的可访问性。避免使用过于刺眼或分散注意力的噪声效果。
语义化: 确保 HTML 结构具有良好的语义，并使用合适的 CSS 类名。这有助于提高代码的可维护性和可读性。

总结

通过巧妙地利用素数和 CSS 的多重背景特性，我们可以创造出视觉上近似随机的伪随机噪声。这种方法虽然不是真正的随机数生成，但在许多视觉效果增强和创造性实验中，可以发挥重要的作用。希望今天的分享能够帮助大家更好地理解和运用 CSS，创造出更加精彩的网页作品。

核心要点回顾

我们今天学习了如何利用素数和 CSS 多重背景生成伪随机噪声，了解了其优势与局限性，并探讨了多种应用场景。希望这些知识能帮助你在实际项目中创造出更炫酷的视觉效果。

更多IT精英技术系列讲座，到智猿学院