我可以使用 jQuery 淡入背景图像 (CSS: background-image) 吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7319552/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can I fade in a background image (CSS: background-image) with jQuery?
提问by aknuds1
I have a divelement with text in it and a background image, which is set via the CSS property background-image. Is it possible to fade in the background image via jQuery?
我有一个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>EDIT
编辑
I've made a fiddleexemplifying my scenario. Basically, this configures an initial background-imageand a transition, and changes the background-imagewith jQuery. In my testing there is no animated transition between the two images.
我制作了一个小提琴来举例说明我的场景。基本上，这配置了一个初始background-image和一个transition，并background-image使用 jQuery更改了。在我的测试中，两个图像之间没有动画过渡。
EDIT2
编辑2
My revised fiddleworks!
我修改后的小提琴作品！
回答by user2947794
i have been searching for ages and finally i put everything together to find my solution. Folks say, you cannot fade-in/-out the background-image- id of the html-background. Thats definitely wrong as you can figure out by implementing the below mentioned demo
我一直在寻找多年，最后我把所有东西放在一起找到我的解决方案。人们说，你不能淡入/淡出 html-background 的 background-image-id。这绝对是错误的，你可以通过实现下面提到的演示来弄清楚
CSS:
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;
Changing body's background-image can now easily be done using JavaScript:
现在可以使用 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();
回答by tomter2014
This is what worked for my, and its pure css
这对我和它的纯 css 有用
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
html
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="bg">
<!-- content here -->
</div> <!-- end bg -->
</body>
</html>
回答by Nicolas Bonnici
With modern browser i prefer a much lightweight approach with a bit of Js and CSS3...
使用现代浏览器，我更喜欢使用一些 Js 和 CSS3 的轻量级方法......
transition: background 300ms ease-in 200ms;
Look at this demo:
看这个演示：
回答by Dhepthi
You can give opacity value as
您可以将不透明度值指定为
div {opacity: 0.4;}
For IE, you can specify as
对于IE，您可以指定为
div { filter:alpha(opacity=10));}
Lower the value - Higher the transparency.
降低值 - 提高透明度。
回答by thwd
It's not possible to do it just like that, but you can overlay an opaque div between the div with the background-image and the text and fade that one out, hence giving the appearance that the background is fading in.
这样做是不可能的，但是您可以在带有背景图像和文本的 div 之间覆盖一个不透明的 div 并将其淡出，从而使背景看起来像淡入淡出。
回答by zyad osseyran
jquery:
查询：
$("div").fadeTo(1000 , 1);
css
css
div {
background: url("../images/example.jpg") no-repeat center;
opacity:0;
Height:100%;
}
html
html
<div></div>
回答by yokmp
You can fade your background-image in various ways since Firefox 4 ...
自 Firefox 4 起，您可以通过各种方式淡化背景图像...
Your CSS:
你的 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;
}
Your XHTML:
你的 XHTML：
<div class="box">
Some Text …
</div>
And thats it.
就是这样。
回答by Muccagelato
I know i'm late, but I found a way using jquery which works on every browser(i tested it on chrome, firefox and Ie 9)and th fore-ground elements are always displayed instead of css3 transition property.
我知道我迟到了，但我找到了一种使用 jquery 的方法，它适用于每个浏览器（我在 chrome、firefox 和 Ie 9 上对其进行了测试）并且总是显示前景元素而不是 css3 过渡属性。
create 2 absolute wrapper and using z-index.
创建 2 个绝对包装器并使用 z-index。
First set the elements that have to be in the fore-ground with the highest z-index property value, and the other elemets(all included in the body, so: body{}) with a lower z-index property value than the fore-ground elements'one , at least of 2 number lower.
首先设置必须在前景中具有最高 z-index 属性值的元素，以及其他元素（都包含在主体中，因此：body{}）的 z-index 属性值低于前景-ground elements'one ，至少低 2 个数字。
HTML part:
HTML部分：
<div class="wrapper" id="wrapper1"></div>
<div class="wrapper" id="wrapper2"></div>
css part:
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
}
than the javascript/jquery one:
比 javascript/jquery 之一：
i needed to change the background image every three second so i used a set timeout.
我需要每三秒更改一次背景图像，所以我使用了设置的超时时间。
this is the code:
这是代码：
$(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
i hope that my answer is clear,if you need more explanation comment it.
我希望我的回答是清楚的，如果你需要更多的解释评论。
sorry for my english :)
对不起我的英语不好 ：）
