我想在执行此代码时淡化图像：
$("#large-img").css('background-image', 'url('+$img+')');
我试过在很多地方添加淡入淡出。
谢谢
【问题讨论】：
#large-img里面没有内容，那么我建议你淡出整个元素，因为你不能淡出单个背景图片。
标签： jquery background fade
不透明度符合您的目的？
如果是这样，试试这个：
$('#elem').css('opacity','0.3')
【讨论】：
如果您尝试淡化背景图像但保留前景文本/图像，您可以使用 css 将背景图像分离到一个新的 div 中，并将其放置在包含文本/图像的 div 上，然后淡化背景 div。
【讨论】：
这可能是你想要的：
$('#elem').fadeTo('slow', 0.3, function()
{
$(this).css('background-image', 'url(' + $img + ')');
}).fadeTo('slow', 1);
延迟 1 秒：
$('#elem').fadeTo('slow', 0.3, function()
{
$(this).css('background-image', 'url(' + $img + ')');
}).delay(1000).fadeTo('slow', 1);
【讨论】：
这可能会有所帮助
HTML
<div id="textcontainer">
<span id="sometext">This is some information </span>
<div id="container">
</div>
</div>
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
$('#container').css('opacity','.1');
【讨论】：
我可以提供替代解决方案吗？
我也遇到了同样的问题，但由于它淡化了整个元素，而不仅仅是背景，所以淡入淡出不起作用。在我的例子中，元素是 body，所以我只想淡化背景。
解决这个问题的一种优雅方法是对元素进行分类并使用 CSS3 过渡作为背景。
transition: background 0.5s linear;
当您使用 toggleClass 或您的代码更改背景时，$("#large-img").css('background-image', 'url('+$img+')'); 它会按照类的定义淡化。
【讨论】：
在上面Rampant Creative Group的解决方案的基础上，我使用jQuery来改变body标签的背景图片：
例如
$('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%'});
我有一个在两个语句之间切换的 javascript 计时器。
我所要做的就是解决创建淡出的问题 -> 淡入效果是使用 Rampant Creative Group 的建议并添加
transition: background 1.5s linear;
我的代码。现在它淡出并漂亮地消失了。
感谢 Rampant Creative Group 和 SoupEnvy 的编辑！！
【讨论】：
这是我发现的唯一合理的淡化背景图像的方法。
<div id="foo">
<!-- some content here -->
</div>
您的 CSS；现在使用CSS3 transition 进行了增强。
#foo {
background-image: url(a.jpg);
transition: background 1s linear;
}
现在换掉背景
document.getElementById("foo").style.backgroundImage = "url(b.jpg)";
瞧，它消失了！
明显的免责声明：如果您的浏览器不支持 CSS3 transition 属性，这将不起作用。在这种情况下，图像将在 的情况下更改。鉴于<1% 的用户浏览器不支持 CSS3，这可能没问题。不要自欺欺人，没关系。
【讨论】：
有人将我指向此线程，因为我遇到了同样的问题，但它对我不起作用。经过数小时的搜索，我找到了一个解决方案 - https://github.com/rewish/jquery-bgswitcher#readme
除了淡入淡出之外，它还有其他一些选项。
【讨论】：