如何更改背景图像，以便图像可以连续（循环）淡入和淡出。我尝试创建一个 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;
}
谢谢！
【问题讨论】：
基本上过渡不适用于背景图像，因此您需要做额外的工作。有很多 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;}
}
如果您需要多张图片并且它不需要是动态的，还有另一种方法
【讨论】：
您还需要一个循环或一组图像；如果您正在考虑在淡出时更改图像；像这样：
Smooth image fade out, change src, and fade in with jquery
我认为看一看会对您有所帮助；很简单。
【讨论】：
将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函数，让背景淡入淡出的时间更长。
【讨论】：
您可以通过以下 (working concept here at jsFiddle) 相当轻松地做到这一点。
HTML：
<div id="dummyDiv"></div>
<div id="landing"><div id="cover" class="hide"></div></div>
正如我在 jsFiddle cmets 中所说，您需要一个 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);
随意玩弄这些数字。只需调整一些值，您就可以让它看起来有很大不同。有任何问题，请随时提出。
【讨论】：
对于淡入和淡出效果，您只需按照以下步骤操作：
1.制作一个 div 并在其中放置一个 100% 宽度和高度的图像 src 标签，使其表现得像背景
<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);
});
【讨论】：