我可以用jQuery淡入背景图片（CSS：background-image）吗？
我有一个文本的div元素和背景图像，通过CSS属性background-image 。 是否有可能通过jQuery淡入背景图片？
HTML：
<div>Text</div>
CSS：
div { background-repeat: no-repeat; background-position: center; background-size: contain; background-image: url(http://upload.wikimedia.org/wikipedia/commons/8/84/Konqi_svg.svg); border: 1px solid #666; height: 10em; }
编辑
我已经做了一个小例子来说明我的情况。 基本上，这configuration了一个初始的background-image和一个transition ，并改变了jQuery的background-image 。 在我的testing中，两个图像之间没有animation过渡。
EDIT2
我修改小提琴的作品！
我一直在寻找年龄，最后我把所有的东西放在一起find我的解决scheme。 人们说，你不能淡入HTML背景的background-image-id。 这是绝对错误的，因为你可以通过执行下面提到的演示来解决
CSS：
html, body height: 100%; /* ges Hoehe der Seite -> weitere Hoehenangaben werden relativ hierzu ausgewertet */ overflow: hidden; /* hide scrollbars */ opacity: 1.0; -webkit-transition: background 1.5s linear; -moz-transition: background 1.5s linear; -o-transition: background 1.5s linear; -ms-transition: background 1.5s linear; transition: background 1.5s linear;
改变身体的背景图像现在可以很容易地使用JavaScript来完成：
switch (dummy) case 1: $(document.body).css({"background-image": "url("+URL_of_pic_One+")"}); waitAWhile(); case 2: $(document.body).css({"background-image": "url("+URL_of_pic_Two+")"}); waitAWhile();
你可以给不透明的价值
div {opacity: 0.4;}
对于IE ，你可以指定为
div { filter:alpha(opacity=10));}
降低价值 – 更高的透明度。
这样做是不可能的，但是你可以在div与背景图像和文本之间叠加一个不透明的div，并淡出这个div，从而使背景消失。
这是我的，它的纯CSS的工作
CSS
html { padding: 0; margin: 0; width: 100%; height: 100%; } body { padding: 0; margin: 0; width: 100%; height: 100%; } #bg { width: 100%; height: 100%; background: url('/image.jpg/') no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; -webkit-animation: myfirst 5s ; /* Chrome, Safari, Opera */ animation: myfirst 5s ; } /* Chrome, Safari, Opera */ @-webkit-keyframes myfirst { from {opacity: 0.2;} to {opacity: 1;} } /* Standard syntax */ @keyframes myfirst { from {opacity: 0.2;} to {opacity: 1;} }
HTML
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <div id="bg"> <!-- content here --> </div> <!-- end bg --> </body> </html>
随着现代浏览器，我喜欢用一点点的Js和CSS3轻量级的方法…
transition: background 300ms ease-in 200ms;
看看这个演示：
你可以以各种方式淡入淡出你的背景图像，因为Firefox 4 …
你的CSS：
.box { background: #CCCCCC; -webkit-transition: background 0.5s linear; -moz-transition: background 0.5s linear; -o-transition: background 0.5s linear; transition: background 0.5s linear; } .box:hover { background: url(path/to/file.png) no-repeat #CCCCCC; }
你的XHTML：
<div class="box"> Some Text … </div>
这就是它。
jQuery的：
$("div").fadeTo(1000 , 1);
CSS
div { background: url("..http://img.dovov.comexample.jpg") no-repeat center; opacity:0; Height:100%; }
HTML
<div></div>
我知道我迟到了，但我find了一种使用jQuery的方法，它可以在每个浏览器上运行（我在Chrome，Firefox和IE 9上testing过），总是显示前景元素而不是css3过渡属性。
创build2个绝对包装并使用z-index。
首先设置必须在z-index属性值最高的前景中的元素，以及z-index属性值低于前者的其他元素（全部包含在body中，如下：body {}）至less有2个数字。
HTML部分：
<div class="wrapper" id="wrapper1"></div> <div class="wrapper" id="wrapper2"></div>
css部分：
.fore-groundElements{ //select all fore-ground elements z-index:0; //>=0 } .wrapper{ background-size: cover; width:100%; height:100%; background-size: 100% 100%; position:absolute; } #wrapper1{ z-index:-1; } #wrapper2{ z-index:-2; } body{ height:100%; width:100%; margin:0px; display:cover; z-index:-3 //<=-3 }
比javascript / jquery一个：
我需要每三秒更换背景图片，所以我使用了一个超时设置。
这是代码：
$(document).ready(main); var main = function(){ var imgPath=[imagesPath1,..,...]; // the array in which store the image paths var newWrapper; // the wrapper to display var currentWrapper; //the current displayed wrapper which has to be faded var l=2; // the next image index to be displayed, it is set to 2 because the first two position of the array(first two images) start already setted up var imgNumber= imgPath.length; //to know when the images are over and restart the carousel var currentImg; //the next image path to be displayed $('#wrapper1').css("background-image", 'url'+imgPath[0]); //pre set the first wrapper background images $('#wrapper2').css("background-image", 'url'+imgPath[1]); //pre set the first wrapper background images setInterval(myfunction,3000); //refresh the background image every three seconds function myfunction(){ if(l===imgNumber-1){ //restart the carousel if every single image has already been displayed l=0; }; if(l%2==0||l%2==2){ //set the wrapper that will be displaied after the fadeOut callback function currentWrapper='#wrapper1'; newWrapper='#wrapper2'; }else{ currentWrapper='#wrapper2'; newWrapper='#wrapper1'; }; currentImg=imgPath[l]; $(currentWrapper).fadeOut(1000,function(){ //fade out the current wrapper, so now the back-ground wrapper is fully displayed $(newWrapper).css("z-index", "-1"); //move the shown wrapper in the fore-ground $(currentWrapper).css("z-index","-2"); //move the hidden wrapper in the back ground $(currentWrapper).css("background-image",'url'+currentImg); // sets up the next image that is now shown in the actually hidden background wrapper $(currentWrapper).show(); //shows the background wrapper, which is not visible yet, and it will be shown the next time the setInterval event will be triggered l++; //set the next image index that will be set the next time the setInterval event will be triggered }); }; //end of myFunction } //end of main
我希望我的回答是明确的，如果你需要更多的解释评论它。
对不起我的英语不好 ：）
