我发布了一个网站：http ://semep.com.br
此页面上每个横幅的背景照片都已修改。我想在照片中放置一个过渡效果作为背景淡入淡出：
CSS 规则
#fullbackground{
/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;
/* Set up proportionate scaling */
width: 100%;
height: auto;
/* Set up positioning */
position: fixed;
top: 0;
left: 0;
transition: background-image 800ms ease-in-out;
-moz-transition: background-image 800ms ease-in-out;
-ms-transition: background-image 800ms ease-in-out;
-o-transition: background-image 800ms ease-in-out;
-webkit-transition: background-image 800ms ease-in-out;
}
更改背景图像的脚本
window.modificarBackground = function(bgArquivo) {
if (screen.width > 1280) {
bgArquivo = "url('/Images/Fundo/1600/" + bgArquivo + "')";
}
if (screen.width <= 1024) {
bgArquivo = "url('/Images/Fundo/1024/" + bgArquivo + "')";
}
if (screen.width > 1024 && screen.width <= 1280) {
bgArquivo = "url('/Images/Fundo/1280/" + bgArquivo + "')";
}
return $("#fullbackground").css("background-image", bgArquivo);
};
在 chrome 中完美运行！
在其他浏览器中这个效果只是一个空白屏幕！