使用 CSS 伪随机添加插图

在 Eric Meyer 的博客 的每篇文章之间，都有一张相当可爱的插图，它可以随机地从这五个选项中选择一个

Eric 将每个插图制作成一个单独的背景图片，然后使用 nth-of-type CSS 属性切换该图片，如下所示

.entry:nth-of-type(2n+1)::before {
   background-image: url(image-1.png);
}

.entry:nth-of-type(3n+1)::before {
   background-image: url(image-2.png);
}

.entry:nth-of-type(4n+1)::before {
   background-image: url(image-3.png);
}

.entry:nth-of-type(5n+1)::before {
   background-image: url(image-4.png);
}

现在似乎是推广我们自己的小工具 :nth 测试器 的好时机。它确实帮助我理解像 (2n+1) 这样的内容在英语中的含义。您可以输入任何您喜欢的字符串，并查看它对您网站的影响

无论如何，回到 Eric 的帖子。正如他提到的，他的技术是伪随机的，因为它看起来像页面上的随机图像，但实际上并非如此。无论如何，我认为这是一个非常棒的技术！而且它确实打破了长时间观看网站时出现的视觉单调性。

以下是它的实际效果

很棒的东西！

另一种方法是使用 CSS 中的随机数。例如，我们可以在 JavaScript 中设置一个变量，然后使用 CSS 自定义属性应用它。或者，我们可以将所有图像放在一个单独的精灵文件里，并根据随机数更改 background-position。

这绝对是 CSS 中那些没有错误答案的事情之一；只是做同一件很棒事情的不同方式！