如何淡化变化的背景图像

Posted 2023-05-08

【中文标题】如何淡化变化的背景图像

【英文标题】：How to fade changing background image

【发布时间】：2011-06-27 12:06:38

【问题描述】：

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

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

我试过在很多地方添加淡入淡出。

谢谢

【问题讨论】：

@fade.. 你的问题是什么？您是在问如何淡化，还是您尝试过如何通过该代码淡化图像..请清楚地提及。

如果#large-img里面没有内容，那么我建议你淡出整个元素，因为你不能淡出单个背景图片。

@mihir 我正在尝试淡出旧背景图像并淡入新背景图像

@anriette 它没有任何内容，所以我应该将其淡出，更改背景图像并将其淡入？

【参考方案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);

【讨论】：

我完全了解您来自哪里，但我正在更改不同元素的背景。我单击缩略图，然后它将大图像从缩略图更改为图像

好的，我得到了它的工作，但它有时会卡在褪色并且看起来变暗或在图像之间跳跃/剪切。不像我想要的那么顺利

好的，我已经解决了卡住的问题。我怎样才能使它淡入新图像以及淡出其他图像？

我相信你的延迟功能放错了地方；将其添加到第一行后，脚本将根据需要运行。

【参考方案2】：

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

我也遇到了同样的问题，但由于它淡化了整个元素，而不仅仅是背景，所以淡入淡出不起作用。在我的例子中，元素是 body，所以我只想淡化背景。

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

transition: background 0.5s linear;

当您使用 toggleClass 或您的代码更改背景时，$("#large-img").css('background-image', 'url('+$img+')'); 它会按照类的定义淡化。

【讨论】：

它如何为您工作？我认为背景图像无法转换...

这是一个优雅的解决方案，烦人的 css3 不支持 bg 图像转换，这里是一个替代 css 方法：mightymeta.co.uk/…

目前：我只在 chrome 中工作。希望浏览器支持能赶上这个。

这是有史以来最好的解决方案，您甚至不需要 jQuery 进行转换。这也很棒，因为如果您确实更改了背景图像，如果新的背景图像相同，它就不会褪色。这对 JS 滑块非常有用。

【参考方案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)";

瞧，它消失了！

---

明显的免责声明：如果您的浏览器不支持 CSS3 transition 属性，这将不起作用。在这种情况下，图像将在 的情况下更改。鉴于<1% 的用户浏览器不支持 CSS3，这可能没问题。不要自欺欺人，没关系。

【讨论】：

最好的解决方案，我有很多代码结合了 background-color 的转换，改变了 background-image 和更多的转换......这个解决方案让它变得更好更容易

但我不能让它在 FF 中工作¿？虽然我使用 -moz-transition，但为什么呢？

【参考方案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 计时器。

我所要做的就是解决创建淡出的问题 -> 淡入效果是使用 Rampant Creative Group 的建议并添加

transition: background 1.5s linear;

我的代码。现在它淡出并漂亮地消失了。

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

【参考方案5】：

有人将我指向此线程，因为我遇到了同样的问题，但它对我不起作用。经过数小时的搜索，我找到了一个解决方案 - https://github.com/rewish/jquery-bgswitcher#readme

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

【讨论】：

这很好用。今天我们有了 CSS 过渡，可以用 1 行代码来实现 [***.com/a/23166579/195812]

【参考方案6】：

不透明度符合您的目的？

如果是这样，试试这个：

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

【讨论】：

我认为这会保持不透明度，直到我重置它，我还是会尝试一下

【参考方案7】：

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

【讨论】：

我不需要那个。我有一组缩略图图像，当我单击缩略图时，它将从缩略图的 href 更改大 img。我希望大图像的这种转换淡入/淡出。

好的，我明白了。我已经将灯箱插件用于类似leandrovieira.com/projects/jquery/lightbox 的东西，但我不认为这正是你所追求的。祝你好运。

【参考方案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');