CSS transition [background-image property] 仅适用于 chrome

Question

我发布了一个网站: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 中完美运行!

在其他浏览器中这种效果只是白屏!

Answer 1

我知道您正在尝试使用 CSS，但是使用 jQuery 呢？我最近想做类似这样的事情。我使用了 fadeIn 和 fadeOut 函数。这些可能对您有所帮助。

这些链接可能会有帮助:

http://api.jquery.com/fadeIn/

http://api.jquery.com/fadeOut/