如何淡化变化的背景图像

Question

我想在执行此代码时淡化图像:

$("#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

我可以提供替代解决方案吗？

我有同样的问题,淡入淡出无效,因为它淡化了整个元素,而不仅仅是背景.在我的情况下,元素是身体,所以我只想淡化背景.

解决这个问题的一个优雅方法是对元素进行分类并使用CSS3过渡作为背景.

transition: background 0.5s linear;

当您使用toggleClass或使用代码更改背景时,$("#large-img").css('background-image', 'url('+$img+')');它将根据类的定义进行淡化.

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

基于上面的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计时器在两个语句之间切换.

所有我必须做的就是解决创建fadeOut的问题 - > fadeIn效果是使用Rampant Creative Group的建议并添加

transition: background 1.5s linear;

到我的代码.现在它逐渐淡出并且美丽.

感谢Rampant Creative Group和SoupEnvy的编辑!