Как изменить случайный фон в CSS с помощью обновления

Question

Я занимаюсь разработкой веб-сайта, но я хочу установить случайный фон в CSS.

Сейчас у меня есть этот код CSS:

#bg {
    -moz-transform: scale(1.0);
    -webkit-transform: scale(1.0);
    -ms-transform: scale(1.0);
    transform: scale(1.0);
    -webkit-backface-visibility: hidden;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 1;
}

    #bg:before, #bg:after {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    #bg:before {
        -moz-transition: background-color 2.5s ease-in-out;
        -webkit-transition: background-color 2.5s ease-in-out;
        -ms-transition: background-color 2.5s ease-in-out;
        transition: background-color 2.5s ease-in-out;
        -moz-transition-delay: 0.75s;
        -webkit-transition-delay: 0.75s;
        -ms-transition-delay: 0.75s;
        transition-delay: 0.75s;
        background-image: linear-gradient(to top, rgba(19, 21, 25, 0.5), rgba(19, 21, 25, 0.5)), url("../../images/overlay.png");
        background-size: auto, 256px 256px;
        background-position: center, center;
        background-repeat: no-repeat, repeat;
        z-index: 2;
    }

    #bg:after {
        -moz-transform: scale(1.125);
        -webkit-transform: scale(1.125);
        -ms-transform: scale(1.125);
        transform: scale(1.125);
        -moz-transition: -moz-transform 0.325s ease-in-out, -moz-filter 0.325s ease-in-out;
        -webkit-transition: -webkit-transform 0.325s ease-in-out, -webkit-filter 0.325s ease-in-out;
        -ms-transition: -ms-transform 0.325s ease-in-out, -ms-filter 0.325s ease-in-out;
        transition: transform 0.325s ease-in-out, filter 0.325s ease-in-out;
        background-image: url("../../images/bg_01.jpg");
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        z-index: 1;
    }

    body.is-article-visible #bg:after {
        -moz-transform: scale(1.0825);
        -webkit-transform: scale(1.0825);
        -ms-transform: scale(1.0825);
        transform: scale(1.0825);
        -moz-filter: blur(0.2rem);
        -webkit-filter: blur(0.2rem);
        -ms-filter: blur(0.2rem);
        filter: blur(0.2rem);
    }

    body.is-loading #bg:before {
        background-color: #000000;
    }

И я сделал этот код JSчтобы изменить фон:

var images = ['bg_01.jpg',
          'bg_02.jpg', 
          'bg_03.jpg', 
          'bg_04.jpg', 
          'bg_05.jpg', 
          'bg_06.jpg', 
          'bg_07.jpg', 
          'bg_08.jpg', 
          'bg_09.jpg', 
          'bg_10.jpg'];
$('body').css({'background-image' : 'url(../../images/' + images[Math.floor(Math.random() * images.length)] + ')']);

Я хочу использовать код JS в #bg: после, как я могу это сделать?мне нужно что-то изменить в коде JS?backgrounf работает хорошо, потому что я использую бесплатный шаблон, но я хочу сохранить этот код, потому что он содержит анимацию и т. д., и я просто хотел бы сделать его случайным при каждом обновлении.

PS: Извините, но я 'm noob в этом.

---

КОД ОБНОВЛЕН И РАБОТАЕТ

Я нашел решение.Сначала я должен был удалить строку:

background-image: url("../../images/bg_01.jpg");

From #bg: after block.Затем я изменил свой код JavaScript следующим образом:

var images = ['bg_01.jpg',
          'bg_02.jpg', 
          'bg_03.jpg', 
          'bg_04.jpg', 
          'bg_05.jpg', 
          'bg_06.jpg', 
          'bg_07.jpg', 
          'bg_08.jpg', 
          'bg_09.jpg', 
          'bg_10.jpg'];
$('#bg').css({'background-image' : 'url(images/' + images[Math.floor(Math.random() * images.length)] + ')'});

Теперь мой веб-сайт меняет фон при каждом обновлении:)

Большое спасибо за вашу помощь!

Answer 1

Ваш вопрос не очень понятен.Я предполагаю, что вы хотите иметь div со случайным фоном и переходом между изображением и цветом.

Сначала вам должна быть строка js ...

$('body').style.backgroundImage = "url(../../images/" + images[Math.floor(Math.random() * images.length)] + ")";

Вот пример того, чтоЯ думаю, что вы хотите достичь.

var div = document.getElementById("myDiv");

var images = [
"https://upload.wikimedia.org/wikipedia/commons/thumb/0/06/Kitten_in_Rizal_Park%2C_Manila.jpg/1200px-Kitten_in_Rizal_Park%2C_Manila.jpg",
"https://www.sdhumane.org/wp-content/uploads/2017/06/10k_nova-0.jpg",
"https://4fi8v2446i0sw2rpq2a3fg51-wpengine.netdna-ssl.com/wp-content/uploads/2016/06/KittenProgression-Darling-week3.jpg",
"http://www.catster.com/wp-content/uploads/2017/12/A-gray-kitten-meowing.jpg"
];

div.onmouseover = function()
{
  div.style.backgroundImage = "url(" + images[Math.round(Math.random() * images.length)] + ")";
}

#myDiv
{
  width: 250px;
  height: 250px;
  background-size: 250px 250px;
}
#colorOverlay
{
  width: 250px;
  height: 250px;
  background: gold;
  -webkit-transition: opacity 0.5s;
  transition: opacity 0.5s;
}
#colorOverlay:hover
{
  opacity: 0;
}

<div id="myDiv">
<div id="colorOverlay">
</div>
</div>

(* В этом примере возникают проблемы, если вы слишком быстро меняете изображения, потому что каждый раз полностью их снова загружаете.)

Этоустанавливает новое изображение, когда мышь находится над элементом div.Вместо этого вы можете сделать это один раз, когда страница загружается.Я думаю, что для перехода от цвета к изображению есть только два элемента: один с изображением, другой с цветом.