css - 通过 CSS 精灵的伪随机图像（随机位置）

Question

我希望我的 HTML 中的标题图像是随机的。我已经通过使用这个php 文件实现了这一点，但是我想做一些不同的事情。我想让随机图像成为一个精灵的一部分。这样，所有图像都可以同时加载，并且用户在导航到不同页面时不必看到图像加载。我还想选择随机因素，即显示这张图片 50% 其他 10% 的时间（如果有 6 张图片）。这甚至可能吗？业余爱好者从哪里开始？这是实现我的场景以使用户看到尽可能少的图像负载的最佳方式吗？

Answer 1

您可以像往常一样在 CSS 中声明 sprite 标题样式，然后简单地调整 sprite in-html 的 xpos/ypos。您将能够回收一​​些已有的逻辑并操纵单个标题概率。

不过，我会坚持使用单个资产，特别是如果它们是谷歌涂鸦的大小。这种方式更容易扩展，并且假设您的其余静态内容已经被缓存，下载新图像的任何开销都可以忽略不计。