Случайное фоновое изображение для фонового изображения

Question

На моем личном сайте: http://pavelrozman.com/ фоновая фотография перезагружается при каждом обновлении с помощью javascript. Затем я наткнулся на классный учебник по обтравочной маске в Интернете.

h1 { 
font-family: Arial; 
font-size: 5em; 
text-align: center; 

background-image: url(Galaxy.jpg); 

-webkit-background-clip: text; 
background-clip: text; 

color: rgba(0,0,0,0); 

}

Я хочу использовать случайное изображение, где он говорит «Galaxy.jpg» так, что когда-нибудь освежить есть новый образ, который обрезается по тексту.

Answer 1

Вот как я подошел бы к проблеме, единственное решение, о котором я могу думать, потребует использования jquery для изменения фонового изображения.

Сначала я создам массив имен изображений, которые вы хотите циклически использовать для фона. Я назвал этот переменный фон.

Jquery код:

var background = ["Galaxy","Galaxy2","Galaxy3","Galaxy4","Galaxy5"]; 
    var randombackground = Math.floor((Math.random()*5)); 
    /*This will generate a random number between 0 and 4, which we will use to access our array, change the 5 to the number of wallpapers that you have*/ 


$(document).ready(function(){ 
    $("h1").css("background-image","url('" + background[randombackground] + ".jpg')"); 
}); 

Код выше генерирует случайное число, которое будет выбрать различные обои каждый раз, когда страница загружается. Это связано с тем, что случайное число будет меняться каждый раз, когда страница загружается. Обратите внимание, что для корректного функционирования кода вам необходимо установить http://jquery.com/.

Надеюсь, это поможет.