正文 

当前位置： 首页 > 源码 >

如何淡化变化的背景图像

     2023-05-08     140

关键词：

【中文标题】如何淡化变化的背景图像【英文标题】：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').css('opacity','0.3')

【讨论】：

我认为这会保持不透明度，直到我重置它，我还是会尝试一下【参考方案2】：

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

【讨论】：

我不需要那个。我有一组缩略图图像，当我单击缩略图时，它将从缩略图的 href 更改大 img。我希望大图像的这种转换淡入/淡出。 好的，我明白了。我已经将灯箱插件用于类似leandrovieira.com/projects/jquery/lightbox 的东西，但我不认为这正是你所追求的。祝你好运。【参考方案3】：

这可能是你想要的：

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

【讨论】：

我完全了解您来自哪里，但我正在更改不同元素的背景。我单击缩略图，然后它将大图像从缩略图更改为图像 好的，我得到了它的工作，但它有时会卡在褪色并且看起来变暗或在图像之间跳跃/剪切。不像我想要的那么顺利 好的，我已经解决了卡住的问题。我怎样才能使它淡入新图像以及淡出其他图像？ 我相信你的延迟功能放错了地方；将其添加到第一行后，脚本将根据需要运行。【参考方案4】：

这可能会有所帮助

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

【讨论】：

【参考方案5】：

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

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

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

transition: background 0.5s linear;

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

【讨论】：

它如何为您工作？我认为背景图像无法转换... 这是一个优雅的解决方案，烦人的 css3 不支持 bg 图像转换，这里是一个替代 css 方法：mightymeta.co.uk/… 目前：我只在 chrome 中工作。希望浏览器支持能赶上这个。 这是有史以来最好的解决方案，您甚至不需要 jQuery 进行转换。这也很棒，因为如果您确实更改了背景图像，如果新的背景图像相同，它就不会褪色。这对 JS 滑块非常有用。【参考方案6】：

在上面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 的编辑！！

【讨论】：

【参考方案7】：

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

<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 属性，这将不起作用。在这种情况下，图像将在 的情况下更改。鉴于&lt;1% 的用户浏览器不支持 CSS3，这可能没问题。不要自欺欺人，没关系。

【讨论】：

最好的解决方案，我有很多代码结合了 background-color 的转换，改变了 background-image 和更多的转换......这个解决方案让它变得更好更容易 但我不能让它在 FF 中工作¿？虽然我使用 -moz-transition，但为什么呢？【参考方案8】：

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

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

【讨论】：

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

如何淡化动画背景图像（全尺寸）[关闭]

】如何淡化动画背景图像（全尺寸）[关闭]【英文标题】：Howtofadeanimatebackgroundimages(fullsize)[closed]【发布时间】：2014-06-0919:27:30【问题描述】：我正在寻找脚本！我想做喜欢这个网站的页脚（背景图片之间的动画写着\'\'不要错过... 查看详情

jQuery：悬停链接时在div中动画（淡化）背景颜色或图像？

】jQuery：悬停链接时在div中动画（淡化）背景颜色或图像？【英文标题】：jQuery:Animate(fade)background-colororimageindivwhenhoveralink?【发布时间】：2012-04-2219:38:45【问题描述】：我想在redhotchilipeppers.com上创建一个菜单。当您将链接悬停... 查看详情

jQuery同时动画和淡化背景图像

】jQuery同时动画和淡化背景图像【英文标题】：jQueryanimateandfadebackgroundimageatthesametime【发布时间】：2012-09-2215:47:43【问题描述】：我有一个选择器，我正在尝试制作动画，同时淡出它的背景图像并淡入另一个背景图像。这就是我... 查看详情

如何检测 UIButton 背景图像的变化？

】如何检测UIButton背景图像的变化？【英文标题】：HowtodetectUIButtonbackgroundimagechange?【发布时间】：2015-03-0314:34:11【问题描述】：我在iOS8上工作，在Xcode上使用ObjectiveC。我需要创建两个视图控制器。第一个：带有背景图像的按钮... 查看详情

点击时如何停止标签栏项目图像的背景宽度变化？

】点击时如何停止标签栏项目图像的背景宽度变化？【英文标题】：HowtostopTabBarItemimages\'backgroundwidthchangingwhentapped?【发布时间】：2018-12-0122:42:16【问题描述】：当我单击标签栏项目图像时，它们的背景（或其他任何内容）宽度... 查看详情

如何淡化背景而不是仅仅改变颜色

】如何淡化背景而不是仅仅改变颜色【英文标题】：Howtofadebackgroundinsteadofjustchangecolor【发布时间】：2014-03-1311:46:46【问题描述】：我试图让我的背景褪色成颜色，而不仅仅是改变。如果可能的话，我也想让它重复一遍！我现在... 查看详情

如何在应用模糊的情况下交叉淡化 UIImageView 的图像

】如何在应用模糊的情况下交叉淡化UIImageView的图像【英文标题】：Howtocross-fadetheimageofUIImageViewwithblurapplied【发布时间】：2015-04-2222:59:02【问题描述】：我正在尝试交叉淡入淡出到新图像。这是一个添加了UIVisualEffectView的UIImageVie... 查看详情

如何使 UIView 从纯色背景色淡化为清除背景色？

】如何使UIView从纯色背景色淡化为清除背景色？【英文标题】：HowcanImakeaUIViewfadefromasolidbackgroundcolortoclearbackgroundcolor?【发布时间】：2016-05-0422:13:37【问题描述】：我知道有多种方法（CAAnimation、commitAnimations等），但最简单的方... 查看详情

淡化 UILabel 的背景颜色？ （静态展示）[重复]

...背景颜色。例如：从深蓝色到浅蓝色（只是静态显示）。如何实现？【问题讨论】：您的意思是您希望标签的背景是从深蓝色到浅蓝色的渐变？是的，我见过的“渐变”，不过算了吧……【参考 查看详情

如何淡化 UIView 背景颜色 - iOS 5

】如何淡化UIView背景颜色-iOS5【英文标题】：HowtofadeUIViewbackgroundcolor-iOS5【发布时间】：2013-01-2700:49:36【问题描述】：我在尝试让自定义UIView类淡化其背景时遇到问题。我检查了以下***问题，但它们似乎对我不起作用。Fadebackground... 查看详情

当用户滚动到不同的页面时，如何在“UICollectionView”的不同背景颜色之间淡化？

】当用户滚动到不同的页面时，如何在“UICollectionView”的不同背景颜色之间淡化？【英文标题】：Howtofadebetweendifferentbackgroundcolorsofa`UICollectionView`astheuserscrollstoadifferentpage?【发布时间】：2016-12-1903:02:18【问题描述】：我正在尝试... 查看详情

如何在没有不透明度的情况下使用 CSS 淡化图像？

】如何在没有不透明度的情况下使用CSS淡化图像？【英文标题】：HowtofadeanimagewithCSSwithoutopacity?【发布时间】：2016-06-1114:16:02【问题描述】：感谢大家的帮助，下面的解决方案。我是Web开发的新手，我正在尝试重建一个网站来练... 查看详情

Swift - 使用 animateWithDuration 淡化 CAGradientLayer

】Swift-使用animateWithDuration淡化CAGradientLayer【英文标题】：Swift-UsinganimateWithDurationtofadeCAGradientLayer【发布时间】：2016-03-2821:03:21【问题描述】：我有switch语句来控制我的背景渐变。它工作得很好（渐变变化），但是它突然改变了... 查看详情

屏蔽背景图像

...我有一个UIslider...当我移动滑块时，背景图像必须消失..如何实现它？【问题讨论】：你想要什么？你的背景图片随着滑块值的变化而变化？？【参考方案1】：设置alpha为0，用于隐藏imag 查看详情

android中背景图像的随机变化

】android中背景图像的随机变化【英文标题】：Randomchangeofbackgroundimagesinandroid【发布时间】：2016-07-1505:46:13【问题描述】：我有一个应用程序，其中有一个恒定的背景图像。我想在单击时随机更改此背景图像。我该怎么做？【问... 查看详情

为啥在卸载相关组件时保持“模态背景淡化显示”存在，我应该如何“删除/禁用”这个 div

...卸载相关组件时保持“模态背景淡化显示”存在，我应该如何“删除/禁用”这个div【英文标题】：Whykeepsthe"modal-backdropfadeshow"existwhentheconcerningcomponentisun-mountedandhowshouldi"remove/disable"thisdiv为什么在卸载相关组件时保... 查看详情

全景背景图像淡入动画问题？

...15:35:08【问题描述】：您好，我正在使用找到的示例here来淡化背景图像。一切正常，只是在淡入动画开始之前，图像会短暂显示，然后动画开始。无背景=>完整图像=>图像消失=>动画开始=>全图注意我确实添加了与他完全... 查看详情

jquery动画中的背景图像位置变化

】jquery动画中的背景图像位置变化【英文标题】：Backgroundimagepositionchangeinjqueryanimation【发布时间】：2013-02-1007:54:12【问题描述】：我想更改jquery动画中的背景图像位置。但是我的代码不起作用。谁能帮我把它短路。以下是我的... 查看详情