javascript - 如何使用刷新更改 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)] + ')']);

我想在#bg:after 中使用 JS 代码，我该怎么做？我需要更改js代码中的某些内容吗？ backgrounf 效果很好，因为我使用的是免费模板，但我想保留该代码，因为有动画等，我只想让它在每次刷新时随机。

PS:抱歉，我是菜鸟。

---

代码已更新并可运行

我找到了解决方案。首先，我必须删除该行:

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

来自#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 上时，它会设置一个新图像。您可以在页面加载时执行一次。要从颜色淡入图像，我认为唯一的方法是有两个 div，一个是图像，一个是颜色。