Добавление случайного фонового изображения в CSS с использованием JavaScript ⇐ Html

[Anonymous]

У меня есть папка, полная куча GIF -файлов, которые я хочу использовать в качестве фона для нескольких элементов на моей странице. У меня есть анимация двери на всех этих элементах, и я хочу, чтобы один из случайных GIF -файлов показ дверь открыта. Ранее я просто использовал одно единственное изображение для всех элементов, таких как: < /p>
html < /p>

Код: Выделить всё

1


< /code>
css < /p>
.door-back {
height: 65px;
width: 65px;
border-radius: 50px;
background-image: url("https://media4.giphy.com/media/8AdyAfsTMKi9QMaQ6n/giphy.gif");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

Но мне было интересно, есть ли для вашей страницы CSS innerhtml или я должен просто подключить их непосредственно к моему HTML? (Высота, ширина, размер и т. Д.) В этой версии я только что попытался иметь адреса изображения в файле JS прямо вверх: < /p>
html < /p>


1


< /code>
js < /p>
const doorBackImg = document.querySelectorAll(".door-back");
const imgArr = [
"https://media0.giphy.com/media/r3jTnU6i ... =200w.webp",
"https://media4.giphy.com/media/phmwMLY1 ... =200w.webp",
"https://media0.giphy.com/media/bnH2hkYp ... d=200.webp",
];

function displayImg() {
let randNum = Math.floor(Math.random() * imgArr.length);
doorBackImg.innerHTML = `${imgArr[randNum]}`;
}
< /code>
Если вам нужно больше кода или информации, дайте мне знать! Я еще не нашел то, что ищу, и ничего, что я пробовал, не сработало.
Ура!

Подробнее здесь: https://stackoverflow.com/questions/649 ... javascript