我有一个带有文字的div元素和一个背景图片，它是通过CSS属性background-image设置的。是否可以通过jQuery淡入背景图像？
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;
}<div>Text</div>
修改
我做了fiddle举例说明我的情景。基本上，这会配置初始background-image和transition，并使用jQuery更改background-image。在我的测试中，两个图像之间没有动画过渡。
EDIT2
我修改后的fiddle有效！
答案 0 :(得分：29)
我一直在寻找年龄，最后我把所有东西放在一起找到我的解决方案。 伙计们说，你不能淡入/淡出html-background的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();
答案 1 :(得分：23)
答案 2 :(得分：5)
您可以将不透明度值设为
div {opacity: 0.4;}
对于IE，您可以指定为
div { filter:alpha(opacity=10));}
降低值 - 透明度越高。
答案 3 :(得分：4)
这样做是不可能的，但你可以在div与背景图像和文本之间叠加一个不透明的div，然后淡出那个，从而给出背景渐渐消失的外观。
答案 4 :(得分：4)
这对我和它的纯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>
答案 5 :(得分：3)
使用现代浏览器，我更喜欢使用Js和CSS3的轻量级方法......
transition: background 300ms ease-in 200ms;
看看这个演示：
答案 6 :(得分：1)
自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>
就是这样。
答案 7 :(得分：1)
jquery的：
var $newDiv = `<div style='background: ${arr_rainbow[k]};'></div>`
element.append('<td style="width:${td.eq(k).width()}px;">${$newDiv}</td>')
CSS
$("div").fadeTo(1000 , 1);
HTML
div {
background: url("../images/example.jpg") no-repeat center;
opacity:0;
Height:100%;
}
答案 8 :(得分：1)
所以..我也在调查此事，发现这里的大多数答案都要求淡化容器元素，而不是淡化实际的背景图像。 然后，我想到了一个hack。我们可以给多个背景吗？如果我们覆盖其他颜色并使之透明，该怎么办，例如下面的代码-
background: url("//unsplash.it/500/400") rgb(255, 255, 255, 0.5) no-repeat center;
此代码实际上可以独立运行。试试看。我们给出了bg图像，并要求其他白色在图像和Voila上具有透明性。 提示-我们可以给不同的颜色和透明胶片以获得不同的滤镜效果。
答案 9 :(得分：0)
我知道我迟到了，但我找到了一种方法，使用jquery可以在每个浏览器上运行（我在chrome，firefox和Ie 9上测试过），并且总是显示前景元素而不是css3过渡属性。< / p>
创建2个绝对包装并使用z-index。
首先设置必须在前景中具有最高z-index属性值的元素，以及具有较低z-index属性值的其他elemets（全部包含在body中，所以：body {}）比前场元素还要低，至少低2个数字。
HTML部分：
<div class="wrapper" id="wrapper1"></div>
<div class="wrapper" id="wrapper2"></div>
css part：
.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 one：
我需要每隔三秒更改一次背景图像，所以我使用了设置超时。
这是代码：
$(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
我希望我的回答很清楚，如果您需要更多解释，请注释。
抱歉我的英语：）