javascript - 仅用于背景图像的 CSS3 过渡

Question

所以我有一个工作的 JS 背景转换器。

基本上它每 5 秒更改一次背景，并且在更改之间有淡入和淡出。

但是，包含背景的 div 包含我不想在每次更改背景时淡入和淡出的内容。我只希望背景图像淡入和淡出。

这可能吗？

<script type="text/javascript">
  $(window).load(function() {          
  var i =0;
  var images = ['images/mc/bgs/3.jpg','images/mc/bgs/1.png','image1.png'];
  var image = $('#slideit');
                //Initial Background image setup
  image.css('background-image', 'url(images/mc/bgs/3.jpg)');
                //Change image at regular intervals
  setInterval(function(){  
   image.fadeOut(1000, function () {
   image.css('background-image', 'url(' + images [i++] +')');
   image.fadeIn(1000);
   });
   if(i == images.length)
    i = 0;
  }, 5000);           
 });
</script>

这是HTML代码

<div class="cartregister" id="slideit">
    <div class="container">
         <h1>my content is here, i dont want this fading</h1>
    </div>
</div>

谢谢，

Answer 1

你只需要将文字和图片放在不同的容器中，通过css的position: absolute属性将文字放在图片之上即可:

html:

<div class="container">
    <div class="cartregister" id="slideit"></div>

<h1>my content is here, i dont want this fading</h1>

</div>

CSS:

.container {
    position:relative;
}
.cartregister {
    position:absolute;
    left:0;
    top:0;
    width:800px;
    height:100px;
}
h1 {
    z-index:100;
    position:absolute;
    left:0;
    top:0;
}

演示:http://jsfiddle.net/xq2Q4/