Я хочу перемещать изображения друг в друга, используя CSS (для перехода) и JS (для изменения URL-адреса изображения). Хотя он работает в Google Chrome, он не работает в Firefox.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="app">
<main>
<button id="img1">Image 1</button>
<button id="img2">Image 2</button>
</main>
</div>
</body>
</html>
CSS :
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#app {
background-image: url('https://images.unsplash.com/photo-1590122401698-69902cf10056?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80');
background-size: cover;
background-position: bottom;
transition: all 2s;
}
main {
min-height: 100vh;
padding: 25px;
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
}
Javascript:
document.getElementById('img1').addEventListener('click', () => {
document.getElementById('app').style.backgroundImage = "url('https://images.unsplash.com/photo-1590169434951-f1622a03fe93?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80')";
});
document.getElementById('img2').addEventListener('click', () => {
document.getElementById('app').style.backgroundImage = "url('https://images.unsplash.com/photo-1590164969490-0e9587f1bf92?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80')";
});
Я просмотрел inte rnet для решений, но ни одно из них не могло решить моя проблема. Я не хочу иметь несколько тегов изображений для изменения фона путем изменения непрозрачности, так как я хочу переключаться между 10 разными изображениями.
Демо: https://jsfiddle.net/e0kdnobh/4/