CSS转换[background-image属性]仅适用于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/