如何使用refresh更改CSS中的随机背景
如何使用refresh更改CSS中的随机背景
提问于 2018-06-03 07:15:45
我正在开发一个网站，但我想在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代码中的某些内容吗？背景效果很好，因为我使用的是一个免费的模板，但我想保留代码，因为它有动画，等等，我只是想让它随机每次刷新。
PS:对不起，我在这方面是新手。
更新的代码和可用的
我已经找到解决方案了。首先，我必须删除这行代码：
background-image: url("../../images/bg_01.jpg");来自#bg:after块。然后，我像这样修改了我的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)] + ')'});现在，我的网站每次刷新都会更改背景:)
非常感谢你的帮助！
回答 1
Stack Overflow用户
发布于 2018-06-03 07:26:59
你的问题不是很清楚。我假设你想要一个带有随机背景并在图像和颜色之间过渡的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，一个是图像，一个是颜色。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50661985
复制相关文章
相似问题