Jquery 在响应背景图像上一次性更改背景图像_Jquery_Css_Background_Responsive Design

Jquery 在响应背景图像上一次性更改背景图像

jquery css responsive-design

Jquery 在响应背景图像上一次性更改背景图像,jquery,css,background,responsive-design,Jquery,Css,Background,Responsive Design,我使用的代码就是这个 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秒后被更改为背景图像，然后保持不变我知道有一些jquery可以改变这样的背景，但我不

我使用的代码就是这个

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秒后被更改为背景图像，然后保持不变

我知道有一些jquery可以改变这样的背景，但我不知道如何让这样的东西与我正在使用的代码一起工作！如果有人能找到解决办法，那就太棒了

我改变背景的出发点是我在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;}
}

HTML JavaScript


罗克森演示
文章、旁白、数字、页脚、页眉、H组、，
菜单，导航，部分{显示：块；}
*{边距：0；填充：0；}
ul{列表样式：无；}
a{文本装饰：无；}
正文{背景：#000；}
.图像{
利润率：50像素；
位置：相对位置；
}
.图像img{
位置：绝对位置；
}
.容光焕发{
盒影：0px 0px 40px 2px#fff
}
住手！
var-stop=false；
函数循环（）{
如果（停止==错误）{
$（'.images-img:eq（1）'）.fadeIn（700，function（）{
$（此）.fadeOut（700，循环）；
});
}
}
循环（）；//起动回路
$（'#停止'）。单击（函数（）{
停止=真；
});

到目前为止，您有哪些代码？因为我现在能给你的唯一答案是www.guru.com=雇佣一个编码员。Lol@milchepaten我也在想同样的事情，更不用说链接死在我身上了。我在看FAQ，现在找不到了，但我知道SO提到了“不仅仅是发布链接”，我已经更新了问题！很抱歉你确定你没有打错“bilder”吗？看起来应该是“builder”@user2141649你粘贴CSS的好东西，现在，你尝试了什么技术？您尝试过什么css转换或javascript代码？顺便说一下，在本页右侧的相关项目下，您可能会发现一些与您的情况非常相关的问题/主题。

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

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