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中使用JS代码：之后，我该怎么做？我需要在js代码中更改某些内容吗？ backgrounf工作正常，因为我使用的是免费模板，但我想保留该代码，因为它有动画等，我只是想让它每次刷新都随机。

PS：对不起，但我在这里是菜鸟。

代码更新和工作

我找到了解决方案。首先，我不得不删除该行：

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

来自#bg：阻止之后。然后，我改变了我的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)] + ")";

以下是我认为你想要实现的一个例子。

＆＃13;

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)] + ")";
}

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

（*如果您更快地更改图像，则此示例会出现问题，因为每次都会再次加载图像。）

当鼠标悬停在div上时，它会设置一个新图像。您可以在页面加载时执行一次。要从颜色淡入图像，我认为唯一的方法是有两个div，一个是图像，一个是颜色。

如何使用刷新更改CSS中的随机背景

1 个答案: