博主的随机默认缩略图

Question

我目前正在学习 html 和 css。我正在开发一个博客模板。

我的模板有一个帖子缩略图的首页。

当我的帖子没有图片时，我已经为我的默认缩略图设置了一个类，并且我已经在 css 中设置了 url。

.altthumbnails {
   background: url(myimagelocation.jpg);  
}

有什么方法可以制作多个默认缩略图？当没有发布图像时，我想随机选择三张图像来显示。

感谢任何回复

Answer 1

你不能只用纯 css 来做。但是你可以通过你使用的服务器端代码或我建议的 js 来做到这一点。基本上，最简单的解决方案之一是您可以为要使用的每个不同图像制作不同的类，然后您可以在 js 中生成一个随机数并使用该数字将不同的类应用于您的元素。这是一个例子：

DEMO

在示例中，有 5 个不同的 css 类提供 5 个不同的背景图像，并且它们的所有名称都以数字 1 >> 5 结尾。

.thumb_1 { .. }
.thumb_2 { .. }
.thumb_3 { .. }
.thumb_4 { .. }
.thumb_5 { .. }

在 javascript 中，我们将遍历对象，生成一个随机数 1 >> 5 并使用该数字添加一个新类。

var div = document.getElementsByClassName("thumb");

//var rand = Math.floor(Math.random() * 5 ); // for just one image

for (var i = 0; i < div.length; i++){
   var rand = Math.floor(Math.random() * 5 ); // for multiple images
   div[i].className += " thumb_" + (rand + 1) ;
};