Changing background image one time on responsive background image

问题

The code I'm using is this one

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

What I'd like to accomplish is that the background image is changed after like 2 sec to a background image that then stays put.

I know there are Jqueries for changing backgrounds like this but I'm not sure how to make something like that work with the code I'm using! It would be awesome if someone hade a solution to this!

My starting point for changing background was the code I found on 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;}
}

回答1:

EXAMPLE

HTML

<div id="myBackground"></div>

CSS

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

JavaScript

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
})

Alternate Style (with FadeIn/Out effect)

HTML

<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>

CSS

#myBackground {
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
}
#myBackground img {
    height: 100%;
    width: 100%;
}
#myBackground img:nth-child(2) {
    display: none;
}

JavaScript

$(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
})

回答2:

<!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>

来源：https://stackoverflow.com/questions/16359492/changing-background-image-one-time-on-responsive-background-image

标签

jquery

css

background

responsive-design