Question

正如问题所说，我试图将背景图像从一张图像淡化为另一张图像。我希望在页面加载时立即显示初始图像，然后将其淡入下一个图像，然后再下一个图像，然后返回到第一个图像，正在进行中。

我在CSS中有背景图片：

.banner-image { 
background:transparent url('../images/8662834823_575a23516d_o.jpg') no-repeat center center;
-webkit-background-size:cover;
-moz-background-size:cover;
background-size:cover; 
height:800px; 
min-width: 1200px;
}

HTML：

<div class="banner-image">

//Content here
</div>

我希望banner-image div保持它的高度（所以其他div出现在它下面）。这就是为什么我想将图像保持为CSS背景。

如何根据上述要求在jquery中的图像之间淡入淡出？谢谢您的帮助。

Answer 1

这是没有插件的最简单的方法：jsFiddle

基本上我在这里做了什么：

创建了具有#bannerContainer

position:relative;

将position:absolute; top:0px; left:0px;添加到.banner-image。
在父级中插入了一些.banner-image，为每个人提供了不同的背景图片

应用以下jQuery：

$(function(){

    var t = setInterval(function(){

        $('.banner-image').last().fadeOut(2000,function(){ // 2 second fade duration
            $this = $(this);
            $parent = $this.parent();
            $this.remove().css('display','block'); // remove the faded element
            $parent.prepend($this); // put it as the first element
        });

    },3000); // every 3 seconds
});

标记：

<div id="bannerContainer">  
    <div class="banner-image"></div>
    <div class="banner-image" style="background-image:url(http://ns223506.ovh.net/rozne/00032cb2e758642ee9a942b49689f775/wallpaper-11152.jpg)"></div>
    <div class="banner-image" style="background-image:url(http://ns223506.ovh.net/rozne/9d1a802255f5c645945047acb4a2bac6/wallpaper-263.jpg)"></div>
    <div class="banner-image" style="background-image:url(http://ns223506.ovh.net/rozne/bd72cad0602bb9e53b4dc7f3fa4d4db9/wallpaper-4635.jpg)"></div>
</div>

Answer 2

它不是一个即插即用的解决方案，但这里是一个用fadein效果改变背景图像的JQuery代码

$(document).ready(function(){
    $('.banner-image').css({opacity: 0, background-image: 'url(../images/new.jpg)'}).fadeIn(2000);
});

还指定其他一些CSS属性，例如background-size，以保持您想要的比例。

Answer 3

尝试此演示 - 使用CSS3交叉淡化图像

http://css3.bradshawenterprises.com/cfimg/

如何使用jquery淡入淡出背景图像（来自CSS）

3 个答案: