仅针对背景图像的CSS3过渡

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,

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/

One potential solution is to use CSS transitions for your fade. You just need to add transition: background-image Xs; to your image container. Then when the background image is changed it will fade to the new one. Note that I don't think transition: is supported in IE8 or below.

Demo Fiddle

CSS:

    //add all appropriate vendor prefixes here
    transition: background-image 2s;

There isn't currently a way to specify an opacity/transparency level for a background image via CSS (which is what you'd want to modify to create a fade in or out that doesn't affect the element's children).

I think the most straightforward solution that will reliably work in all browsers is to have a separate HTML element for your background images and your content, like this:

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

You can position the background image element behind the content with position:absolute and a lower z-index.