Ich versuche das Hintergrundbild von einem zu änderndiv ohne Auswirkungen auf den Inhalt innerhalb des div. Ich habe folgenden Code geschrieben, um das Hintergrundbild zu ändern. Ich habe nicht verstanden, warum Firefox nicht auf meinen CSS-Übergang reagiert. Gibt es einen Fix, mit dem ich es schaffen kann, in IE und Firefox zu arbeiten?
Html
<body>
<header>
</header>
</body>
Css
body {
margin: 0;
}
header {
height: 665px;
width: 100%;
background-image: url("image0.jpg");
-moz-transition: background-image 1s ease-in-out;
-webkit-transition: background-image 1s ease-in-out;
-ms-transition: background-image 1s ease-in-out;
-o-transition: background-image 1s ease-in-out;
}
Jquery
function preloadImages(array) {
if (!preloadImages.list) {
preloadImages.list = [];
}
for (var i = 0; i < array.length; i++) {
var img = new Image();
img.src = array[i];
preloadImages.list.push(img);
}
}
var imageURLs = [
"image0.jpg",
"image1.jpg",
"image2.jpg",
"image3.jpg",
"image4.jpg"
];
preloadImages(imageURLs);
var counterForBackgroundImage = -1;
function changeBackgroundImage() {
counterForBackgroundImage++;
if (counterForBackgroundImage > imageURLs.length-1)
counterForBackgroundImage = 0;
$("header").css("background-image", "url(" + imageURLs[counterForBackgroundImage] + ")");
setTimeout(function() {
changeBackgroundImage();
}, 5000);
}
changeBackgroundImage();
Antworten:
5 für die Antwort № 1Die animierte Eigenschaft für das Hintergrundbild ist unter nicht aufgeführt w3c animierbare Liste.
Versuchen Sie es mit einem Trick wie Dies.