从一个背景渐变到另一个背景

Fade in from a background to another one

本文关键字：背景 渐变 另一个 一个      更新时间：2023-09-26

假设我的元素有background-image:background1.png.

如何使元素的背景渐变为background2.png而不使第一个淡出

将第二个元素(background2.png)放置在第一个元素的上方。并在第二个元素中渐变

基本上可以用JQuery自动完成:

  $('.oldclass').prepend('<div class="newclass"></div>');
  $('.newclass').fadeIn('slow');

工作演示:http://jsfiddle.net/AlienWebguy/GKUnF/

我找到了一个很好的url，其中如何做到这一点是解释清楚:

http://snook.ca/archives/javascript/jquery-bg-image-animations

但是它需要创建一个包含两者的图像，使用CSS Sprites来实现这一点…

实际上，没有一种简单或优雅的方法来做到这一点。CSS动画依赖于这样一个事实，即不透明度有中间值(即它们是连续的)。

最好的解决方案可能是将div与各自的背景分开，将它们放在彼此的顶部。然后在默认情况下隐藏第二个，当您想要更改为其背景时调用fadeIn('slow')。

相关文章：