我正在使用的代码就是这个
background: url(bilder/cover.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
我想要完成的是背景图像在2秒后更改为背景图像然后保持不变。
我知道有更改背景的Jqueries,但我不知道如何使用我正在使用的代码制作类似的东西!如果有人提出解决方案,这将是非常棒的!
我改变背景的出发点是我在w3schools上找到的代码:
{
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
-webkit-animation:myfirst 5s; /* Safari and Chrome */
}
@keyframes myfirst
{
from {background:red;}
to {background:yellow;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background:red;}
to {background:yellow;}
}
答案 0 :(得分:0)
<div id="myBackground"></div>
#myBackground {
bottom: 0;
left: 0;
position: fixed;
right: 0;
top: 0;
background: url(http://jsfiddle.net/img/initializing.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
var imgUrl = "url(http://cdn.css-tricks.com/wp-content/themes/CSS-Tricks-10/images/bg.png)";
$(function() { // starts when page is loaded and ready
setTimeout(function() {
$("#myBackground").css("background-image", imgUrl);
}, 2000); // 2 second timer
})
<div id="myBackground">
<img src="http://jsfiddle.net/img/initializing.png" />
<img src="http://cdn.css-tricks.com/wp-content/themes/CSS-Tricks-10/images/bg.png" />
</div>
#myBackground {
bottom: 0;
left: 0;
position: fixed;
right: 0;
top: 0;
}
#myBackground img {
height: 100%;
width: 100%;
}
#myBackground img:nth-child(2) {
display: none;
}
$(function() { // starts when page is loaded and ready
setTimeout(function() {
$("#myBackground img:nth-child(1)").fadeOut("slow");
$("#myBackground img:nth-child(2)").fadeIn(1500);
}, 2000); // 2 second timer
})
答案 1 :(得分:0)
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>demo by roXon</title>
<script src="s.js"></script>
<style>
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
*{margin:0;padding:0;}
ul{list-style:none;}
a{text-decoration:none;}
body{background:#000;}
.images{
margin:50px;
position:relative;
}
.images img{
position:absolute;
}
.glowed{
box-shadow: 0px 0px 40px 2px #fff
}
</style>
</head>
<body>
<button id="stop">STOP IT!</button>
<div class="images">
<img src="images/9.jpg" />
<img src="images/9red.jpg" class="glowed"/>
</div>
<script>
var stop = false;
function loop(){
if(stop===false){
$('.images img:eq(1)').fadeIn(700, function(){
$(this).fadeOut(700,loop);
});
}
}
loop(); // start loop
$('#stop').click(function(){
stop=true;
});
</script>
</body>
</html>