博主隨機默認縮略圖

Question

我目前正在學習html和css。我正在研究博客博客模板。

我的模板有張貼縮略圖的首頁。

我爲我的默認縮略圖設置了一個類，當我的帖子沒有圖像時，我在css中設置了url。

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

有沒有什麼辦法可以讓一個以上的默認縮略圖？我想選擇三張圖像隨機顯示，當沒有張貼圖像時。

感謝您的任何回覆

Answer 1

你不能只用純css。但是你可以通過你使用的服務器端代碼或者我建議的那個來完成。基本上最簡單的解決方案之一就是可以爲要使用的每個不同圖像創建不同的類，然後您可以在js中生成一個隨機數，並使用此數字將不同的類應用於元素。這裏有一個例子：

DEMO

在這個例子中有一些提供5種不同的背景圖像和他們所有人的名字與編號1 >> 5.

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

結束5個不同的CSS類在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) ; 
};