Question

如何更改背景图像，以便图像可以连续（循环）淡入和淡出。我已经尝试创建一个div并在那里添加几个图像，但这似乎不起作用，因为我需要图像为背景大小：封面和中心位置。我之前已经问过类似的问题，但我似乎无法让这个问题起作用。

#landing {
  position: relative;
  margin-top: 0px;
  background-image:url('/images/blue.jpg');
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center;
  background-color: black;

}

谢谢！

Answer 1

基本上，过渡不适用于背景图像，因此您需要执行其他工作。有许多jQuery插件可以进行幻灯片放映。它们都采用相同的方法，使用两个图像元素并逐渐淡出以实现效果。

您实际上可以使用纯CSS 和无其他元素来执行此操作，具体取决于浏览器要求。这只适用于两张图片。

#landing {
    position: relative;
    border: 1px solid #666;
    height: 10em;
}

#landing::before, #landing::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background-size: contain;
}

#landing::before {
    background: #fff url(http://www.openclipart.org/people/Map2Map/Waveski_Rear.svg) no-repeat center;
}

#landing::after {
    background: #fff url(http://www.openclipart.org/people/Map2Map/Waveski_Along_Wave.svg) no-repeat center;
    animation: fadeWithDelay 2s infinite linear alternate;
} 

@keyframes fadeWithDelay {
    0% {opacity: 1;}
    25% {opacity: 1;}
    75% {opacity: 0;}
    100% {opacity: 0;}   
}

JS Fiddle Demo

如果你需要多张图片并且它不需要是动态的，那么还有另一种方法

JS Fiddle Demo

Answer 2

将height，width和z-index添加到您的CSS：

#landing {
    position: relative;
    margin-top: 0px;
    background:url('https://www.google.com/images/srpr/logo11w.png') no-repeat;
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center;
    height:100px;
    width:100px;
    background-color: black;
    z-Index:-1;
}

使用setTimeout()淡入淡出。

function FadeOut(){
    $('#landing').fadeOut();
}

function FadeIn(){
     $('#landing').fadeIn();
}

setTimeout(function(){FadeOut();}, 1000);
setTimeout(function(){FadeIn();}, 1000);

您可以在forloop中添加setTimeout功能，以使背景淡入淡出更长时间。

<强> JSFiddle Demo

Answer 3

你还需要一个循环或一组图像;如果你想在淡出时改变图像;像这样的东西：

Smooth image fade out, change src, and fade in with jquery

我认为看一下这会对你有所帮助;很简单。

Answer 4

您可以使用以下内容（working concept here at jsFiddle）轻松完成此操作。

HTML：

<div id="dummyDiv"></div>
<div id="landing"><div id="cover" class="hide"></div></div>

正如我在jsFiddle评论中所说，你需要一个dummyDiv，这样你就可以在将下一个图像加载到#landing之前将其加载到其中。如果没有这个，你第一次在你的图像数组中循环时会遇到加载时间。

CSS：

#dummyDiv {
    position: inline;
    height: 0;
    width: 0;
    margin: 0;
    padding: 0;
}
#landing {
  position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  margin-top: 0px;
  background-image:url('http://placekitten.com/200/300');
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center;
  background-color: black;
  transition: background-image .5s;
  z-index: -3;

}
#cover {
    background: white;
    opacity: .8;
    transition: opacity .7s;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -2;
}
#cover.hide {
    opacity: 0;
}

的Javascript

var kittens = ["http://placekitten.com/200/300", "http://placekitten.com/400/301", "http://placekitten.com/200/305", "http://placekitten.com/200/308"]

var currentKitten = 1;
var lastKitten = 0;

var changeUpTheKitten = function() {
    lastKitten = currentKitten;
    currentKitten = (++currentKitten < kittens.length) ? currentKitten : 0;
    // we need to cache the image so it loads in smoothly as a bg on the real #landing div
    $("#dummyDiv").css("background-image", "url("+kittens[currentKitten]+")");
    $("#cover").removeClass("hide");
    $("#landing").css("background-image", "url("+kittens[lastKitten]+")");
    //  url("+kittens[lastKitten]+")"
    setTimeout(function() { $("#cover").addClass("hide"); }, 700);
};

var kittenChangeInterval = setInterval(changeUpTheKitten, 3000);

随意玩这些数字。你可以通过调整一些值来使它看起来有很多不同。如有任何问题，请随时提出。

Answer 5

对于fadeIn和FadeOut效果，您只需按照以下步骤操作：

1.制作div并在其中放置一个图像src标签，其宽度和高度均为100％，表现得像背景

<div id="mybody" class="av-row-40 bg-danger" style="width:80%;margin:auto;>
    <img src="C:/Users/Naveen/Desktop/Images/2.jpg" style="width:100%;height:100%" id="myimage">
</div>

$(document).ready(function){
        setInterval(function(){
            $("#myimage").fadeOut(1000);
            setTimeout(function(){
                $("#myimage").fadeIn(1000);
                if(index==5) index=0;
                index++;
                $("#myimage").attr("src",changeimages[index]);  
                /*alert(changeimages[index]);*/ 
            },1000);
        },3000);
  });

淡入淡出'背景图像'

5 个答案: