如何淡化改变背景图像

我想在执行此代码时淡入图像：

$("#large-img").css('background-image', 'url('+$img+')'); 

我已经尝试在这么多地方淡入淡出。

谢谢

Answer 1

这可能是你想要的：

 $('#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); 

Answer 2

我可以提供替代解决scheme吗？

我也有同样的问题，淡入淡出不起作用，因为它淡化了整个元素，而不仅仅是背景。 在我的情况下，元素是身体，所以我只想淡化背景。

一个优雅的方法来解决这个问题是类的元素，并使用CSS3过渡的背景。

transition: background 0.5s linear;

当您更改背景时，无论是使用toggleClass还是使用您的代码， $("#large-img").css('background-image', 'url('+$img+')'); 它将会像class级所定义的那样消失。

Answer 3

这是我发现淡化背景图像的唯一合理的事情。

 <div id="foo"> <!-- some content here --> </div> 

你的CSS; 现在增强了CSS3转换 。

 #foo { background-image: url(a.jpg); transition: background 1s linear; } 

现在换掉背景

 document.getElementById("foo").style.backgroundImage = "url(b.jpg)"; 

Voilà，它消失了！

---

明显的免责声明：如果您的浏览器不支持CSS3 transition属性，这将无法正常工作。 在这种情况下，图像将不会发生转变。 鉴于<1%的用户浏览器不支持CSS3，这可能是好的。 不要欺骗你自己，这很好。

Answer 4

基于上面的猖獗的创意集团的解决scheme，我使用jQuery来更改身体标记的背景图像：

例如

 $('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计时器之间切换两个声明。

所有我必须要做的，以解决创build一个fadeout的问题 – >淡入效果是使用Rampant创意集团的build议和添加

 transition: background 1.5s linear; 

到我的代码。 现在它淡出，美丽。

谢谢猖獗的创意集团和SoupEnvy的编辑！

Answer 5

不透明符合您的目的？

如果是的话，试试这个：

 $('#elem').css('opacity','0.3') 

Answer 6

如果您试图淡化背景图像，但保留前景文本/图像，您可以使用CSS来分隔背景图像到一个新的div并将其放置在包含文本/图像的div，然后淡化背景div。

Answer 7

这可能有帮助

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'); 

Answer 8

有人指出我这个线程，因为我有同样的问题，但它不适合我。 经过几个小时的search，我发现了一个解决scheme – https://github.com/rewish/jquery-bgswitcher#readme

除了淡入淡出之外，还有其他一些选项。