0

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

在其他浏览器中这个效果只是一个空白屏幕！

4

1 回答 1

0

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

这些链接可能会有所帮助：

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

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

于 2012-07-11T15:24:51.887 回答