jQuery 如何淡化变化的背景图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5002351/
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
How to fade changing background image
提问by fadejquery
I want to fade the images when I do this code:
当我执行以下代码时，我想淡化图像：
$("#large-img").css('background-image', 'url('+$img+')');
I've tried putting fade in so many places.
我试过在很多地方加入淡入淡出。
Thanks
谢谢
回答by MacMac
This is probably what you wanted:
这可能是你想要的：
$('#elem').fadeTo('slow', 0.3, function()
{
$(this).css('background-image', 'url(' + $img + ')');
}).fadeTo('slow', 1);
With a 1 second delay:
延迟 1 秒：
$('#elem').fadeTo('slow', 0.3, function()
{
$(this).css('background-image', 'url(' + $img + ')');
}).delay(1000).fadeTo('slow', 1);
回答by Rampant Creative Group
Can I offer an alternative solution?
我可以提供替代解决方案吗？
I had this same issue, and fade didn't work because it faded the entire element, not just the background. In my case the element was body, so I only wanted to fade the background.
我遇到了同样的问题，并且淡入淡出不起作用，因为它淡化了整个元素，而不仅仅是背景。在我的例子中，元素是 body，所以我只想淡化背景。
An elegant way to tackle this is to class the element and use CSS3 transition for the background.
解决这个问题的一种优雅方法是对元素进行分类并使用 CSS3 过渡作为背景。
transition: background 0.5s linear;
transition: background 0.5s linear;
When you change the background, either with toggleClass or with your code, $("#large-img").css('background-image', 'url('+$img+')');it will fade as defined by the class.
当您使用 toggleClass 或您的代码更改背景时，$("#large-img").css('background-image', 'url('+$img+')');它会按照类的定义淡出。
回答by Thank you
This was the only reasonable thing I found to fade a background image.
这是我发现使背景图像褪色的唯一合理方法。
<div id="foo">
<!-- some content here -->
</div>
Your CSS; now enhanced with CSS3 transition.
你的 CSS；现在增强了CSS3 过渡。
#foo {
background-image: url(a.jpg);
transition: background 1s linear;
}
Now swap out the background
现在换掉背景
document.getElementById("foo").style.backgroundImage = "url(b.jpg)";
Voilà, it fades!
瞧，它消失了！
Obvious disclaimer:if your browser doesn't support the CSS3 transitionproperty, this won't work. In which case, the image will change withouta transition. Given <1%of your users' browser don't support CSS3, that's probably fine. Don't kid yourself, it's fine.
明显的免责声明：如果您的浏览器不支持 CSS3transition属性，这将不起作用。在这种情况下，图像将在没有过渡的情况下发生变化。鉴于<1%您用户的浏览器不支持 CSS3，这可能没问题。别自欺欺人了，没事的。
回答by Ben
Building on Rampant Creative Group's solution above, I was using jQuery to change the background image of the body tag:
基于上面 Rampant Creative Group 的解决方案，我使用 jQuery 来更改 body 标签的背景图像：
e.g.
例如
$('body').css({'background': 'url(/wp-content/themes/opdemand/img/bg-sea.jpg) fixed', 'background-size': '100% 100%'});
$('body').css({'background': 'url(/wp-content/themes/opdemand/img/bg-trees.jpg) fixed', 'background-size': '100% 100%'});
I had a javascript timer that switched between the two statements.
我有一个 javascript 计时器，可以在两个语句之间切换。
All I had to do to solve the issue of creating a fadeOut -> fadeIn effect was use Rampant Creative Group's suggestion and add
为了解决创建淡出 -> 淡入效果的问题，我所要做的就是使用 Rampant Creative Group 的建议并添加
transition: background 1.5s linear;
to my code. Now it fades out and in beautifully.
到我的代码。现在它淡出又漂亮。
Thanks Rampant Creative Group's and SoupEnvy for the edit!!
感谢 Rampant Creative Group 和 SoupEnvy 的编辑！！
回答by Bizzaro
Someone pointed me to this thread because I had this same issue but it didn't work for me. After hours of searching I found a solution using this - https://github.com/rewish/jquery-bgswitcher#readme
有人将我指向此线程，因为我遇到了同样的问题，但它对我不起作用。经过数小时的搜索，我找到了一个解决方案 - https://github.com/rewish/jquery-bgswitcher#readme
It has a few other options other than fade too.
除了淡入淡出之外，它还有其他一些选择。
回答by Soulbe
Opacity serves your purpose?
不透明度服务于你的目的？
If so, try this:
如果是这样，试试这个：
$('#elem').css('opacity','0.3')
回答by iandayman
If your trying to fade the backgound image but leave the foreground text/images you could use css to separate the background image into a new div and position it over the div containing the text/images then fade the background div.
如果您尝试淡化背景图像但保留前景文本/图像，您可以使用 css 将背景图像分离到一个新的 div 中，并将其放置在包含文本/图像的 div 上，然后淡化背景 div。
回答by Anooj
This may help
这可能有帮助
HTML
HTML
<div id="textcontainer">
<span id="sometext">This is some information </span>
<div id="container">
</div>
</div>
CSS
CSS
#textcontainer{
position:relative;
border:1px solid #000;
width :300px;
height:300px;
}
#container{
background-image :url("http://dcooper.org/gallery/cf_appicon.jpg");
width :100%;
height:100%;
}
#sometext{
position:absolute;
top:50%;
left:50%;
}
Js
JS
$('#container').css('opacity','.1');
