Я знаю, что опаздываю, но я нашел способ, используя jquery, который работает в любом браузере (я тестировал его на chrome, firefox и т. Е. 9), и передние элементы всегда отображаются вместо свойства перехода css3.
создайте 2 абсолютных обертки и используя z-index.
Сначала установите элементы, которые должны быть на переднем плане, с самым высоким значением свойства z-index, и другие элементы (все включены)в теле, так: body {}) с более низким значением свойства z-index, чем у одного из элементов переднего плана, как минимум на 2 числа меньше.
HTML-часть:
<div class="wrapper" id="wrapper1"></div>
<div class="wrapper" id="wrapper2"></div>
css part:
.fore-groundElements{ //select all fore-ground elements
z-index:0; //>=0
}
.wrapper{
background-size: cover;
width:100%;
height:100%;
background-size: 100% 100%;
position:absolute;
}
#wrapper1{
z-index:-1;
}
#wrapper2{
z-index:-2;
}
body{
height:100%;
width:100%;
margin:0px;
display:cover;
z-index:-3 //<=-3
}
, чем javascript / jquery one:
Мне нужно было менять фоновое изображение каждые три секунды, поэтому я использовал установленное время ожидания.
это код:
$(document).ready(main);
var main = function(){
var imgPath=[imagesPath1,..,...]; // the array in which store the image paths
var newWrapper; // the wrapper to display
var currentWrapper; //the current displayed wrapper which has to be faded
var l=2; // the next image index to be displayed, it is set to 2 because the first two position of the array(first two images) start already setted up
var imgNumber= imgPath.length; //to know when the images are over and restart the carousel
var currentImg; //the next image path to be displayed
$('#wrapper1').css("background-image", 'url'+imgPath[0]); //pre set the first wrapper background images
$('#wrapper2').css("background-image", 'url'+imgPath[1]); //pre set the first wrapper background images
setInterval(myfunction,3000); //refresh the background image every three seconds
function myfunction(){
if(l===imgNumber-1){ //restart the carousel if every single image has already been displayed
l=0;
};
if(l%2==0||l%2==2){ //set the wrapper that will be displaied after the fadeOut callback function
currentWrapper='#wrapper1';
newWrapper='#wrapper2';
}else{
currentWrapper='#wrapper2';
newWrapper='#wrapper1';
};
currentImg=imgPath[l];
$(currentWrapper).fadeOut(1000,function(){ //fade out the current wrapper, so now the back-ground wrapper is fully displayed
$(newWrapper).css("z-index", "-1"); //move the shown wrapper in the fore-ground
$(currentWrapper).css("z-index","-2"); //move the hidden wrapper in the back ground
$(currentWrapper).css("background-image",'url'+currentImg); // sets up the next image that is now shown in the actually hidden background wrapper
$(currentWrapper).show(); //shows the background wrapper, which is not visible yet, and it will be shown the next time the setInterval event will be triggered
l++; //set the next image index that will be set the next time the setInterval event will be triggered
});
}; //end of myFunction
} //end of main
я надеюсь, что мой ответ ясен, если вам нужно больше пояснений, прокомментируйте его.
извините за мой английский:)