仅针对背景图像的CSS3过渡

Question

So i have a working JS background changer.

Basically it changes the background every 5 seconds and between the change there is a fadein and fadeout.

However, the div that contains the background has content within in which i dont want to fadein and fadeout everytime the backgrounds are changed. I only want the background image to fadein and fadeout.

Is this possible?

<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>

Here is the HTML code

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

Thanks,

Answer 1

You just need to place the text and image in different containers, and place text on top of the image with css's position: absolute property:

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;
}

demo: http://jsfiddle.net/xq2Q4/