改变背景图像上响应背景图像一次 [英] Changing background image one time on responsive background image

问题描述

在code我使用的是这个

 背景：网址（BILDER / cover.jpg）固定不重复中心中心;
-webkit-背景大小：盖;
-moz-背景大小：盖;
-o-背景大小：盖;
背景大小：盖;
}
 

我想做到的是，背景图像后变了样2秒的背景图片，然后原地踏步。

我知道有改变这样的背景Jqueries，但我不知道如何让喜欢的东西与我用code，它的工作！这将是真棒，如果有人哈德解决这个！

我改变的背景出发点是code我在W3Schools的发现：

  {
宽度：100像素;
高度：100像素;
背景：红色;
动画：myfirst 5S;
-webkit-动画：myfirst 5S; / * Safari和Chrome * /
}@keyframes myfirst
{
从{背景：红色;}
为{背景：黄色;}
}@ -webkit-关键帧myfirst / * Safari和Chrome * /
{
从{背景：红色;}
为{背景：黄色;}
}
 

解决方案

示例

HTML

 ＆LT; D​​IV ID =myBackground＆GT;＆LT; / DIV＆GT;
 

的CSS

  #myBackground {
    底部：0;
    左：0;
    位置：固定;
    右：0;
    顶部：0;    背景：网址（http://jsfiddle.net/img/initializing.png）不重复中心中心固定;
    -webkit-背景大小：盖;
    -moz-背景大小：盖;
    -o-背景大小：盖;
    背景大小：盖;
}
 

的JavaScript

  VAR imgUrl的=URL（http://cdn.css-tricks.com/wp-content/themes/CSS-Tricks-10/images/bg.png）;$（函数（）{//开始时，页面加载并准备
    的setTimeout（函数（）{
        $（＃myBackground），CSS（背景图片，imgUrl的）。
    }，2000）; // 2秒计时器
}）
 

---

的

替换样式（带淡入/淡出效果）

HTML

 ＆LT; D​​IV ID =myBackground＆GT;
    ＆所述; IMG SRC =htt​​p://jsfiddle.net/img/initializing.png/＆GT;
    ＆所述; IMG SRC =htt​​p://cdn.css-tricks.com/wp-content/themes/CSS-Tricks-10/images/bg.png/＆GT;
＆LT; / DIV＆GT;
 

的CSS

  #myBackground {
    底部：0;
    左：0;
    位置：固定;
    右：0;
    顶部：0;
}
#myBackground IMG {
    高度：100％;
    宽度：100％;
}
#myBackground IMG：第n个孩子（2）{
    显示：无;
}
 

的JavaScript

  $（函数（）{//当页面加载并准备开始
    的setTimeout（函数（）{
        $（＃myBackground IMG：第n个孩子（1））淡出（慢）;
        $（＃myBackground IMG：第n个孩子（2））。淡入（1500）;
    }，2000）; // 2秒计时器
}）
 

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

解决方案

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

这篇关于改变背景图像上响应背景图像一次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！