如何退色改变背景图像

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

谢谢

8 个解决方案

#1

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

#2

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;

过渡:背景0.5 s线性;

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或代码(“# big -img”)更改背景时。css(“背景图像”、“url(' + img美元+ ')');按照类的定义，它将逐渐消失。

#3

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 transition property, this won't work. In which case, the image will change without a transition. Given <1% of your users' browser don't support CSS3, that's probably fine. Don't kid yourself, it's fine.

明显的免责声明:如果您的浏览器不支持CSS3转换属性，这将不起作用。在这种情况下，图像将在没有转换的情况下发生变化。如果你的用户浏览器中只有1%不支持CSS3，那可能没问题。别自欺欺人了，没事的。

#4

Building on Rampant Creative Group's solution above, I was using jQuery to change the background image of the body tag:

基于上面创意猖獗的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

为了解决fadeOut -> fadeOut的问题，我所要做的就是使用猖獗的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!!

感谢猖獗的创意组和搜身编辑!!

#5

Opacity serves your purpose?

透明度是你的目的吗?

If so, try this:

如果是这样的话,试试这个:

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

#6

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。

#7

This may help

这可以帮助

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

$('#container').css('opacity','.1');

#8

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/jquerybgswitcher #readme

It has a few other options other than fade too.

除了退色，它还有其他一些选择。

#1