伪随机添加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 中，这绝对属于没有错误答案的情况，只是实现同一出色效果的不同方法！

以上是伪随机添加CSS的插图的详细内容。更多信息请关注PHP中文网其他相关文章！