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 transition。

#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标签的背景图片：

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

我有一个javascript计时器，可以在两个语句之间切换。

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

transition: background 1.5s linear;

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

感谢Rampant Creative Group和SoupEnvy的编辑!!

Answer 5

有人向我指出这个帖子，因为我遇到了同样的问题，但它对我没有用。经过几个小时的搜索，我找到了一个解决方案 - https://github.com/rewish/jquery-bgswitcher#readme

除了褪色之外，还有其他一些选择。

Answer 6

不透明度符合您的目的？

如果是这样，试试这个：

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

Answer 7

如果您尝试淡化背景图像但保留前景文本/图像，则可以使用css将背景图像分离为新的div并将其放置在包含文本/图像的div上，然后淡化背景div。

Answer 8

这可能会有所帮助

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

如何淡化变化的背景图像

8 个答案: