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過渡來淡化效果。 您只需要添加transition: background-image Xs; 到您的圖像容器。 然后，當更改背景圖像時，它將淡出為新的背景圖像。 請注意，我認為IE8或更低版本不支持transition: :。

演示小提琴

CSS：

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

Answer 2

當前尚沒有一種方法可以通過CSS為背景圖片指定不透明度/透明度級別（您要修改該效果以創建不影響元素子元素的淡入或淡出效果）。

我認為將在所有瀏覽器中可靠運行的最直接的解決方案是為背景圖片和內容使用單獨的HTML元素，如下所示：

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

您可以使用position:absolute和較低的z-index將背景圖像元素放置在內容后面。

Answer 3

您只需要將文本和圖像放置在不同的容器中，並使用css的position: absolute將文本放置在圖像頂部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/