僅用於背景圖像的CSS3過渡

基本上它每隔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>

感謝，

來源

2014-06-07 GNov

你只需要放在不同的容器中的文字和圖片，並把文字與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/

來源

2014-06-07 01:16:54 Fabricator

一個潛在的解決方案是使用CSS轉換爲你的褪色。您只需將transition: background-image Xs;添加到您的圖像容器。然後當背景圖像被改變時，它會淡入新的。請注意，我認爲在IE8或更低版本中不支持transition:。

Demo Fiddle

CSS：

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

來源

2014-06-07 01:11:46 badAdviceGuy

目前還沒有指定通過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。

來源

2014-06-07 01:16:10 Kylok

僅用於背景圖像的CSS3過渡

回答

相關問題