CSS3的过渡只适用于背景图像 - CSS3 transition only for the background image

CSS3 transition only for the background image

本文关键字：适用于背景图像 CSS3 | 更新日期: 2023-09-27

所以我有一个工作的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>

谢谢,

您只需要将文本和图像放在不同的容器中，并使用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/

一个可能的解决方案是使用CSS渐变。您只需要将transition: background-image Xs;添加到映像容器中。然后，当背景图像被改变，它将褪色到新的一个。请注意，我认为transition:不支持IE8或以下版本。

演示小提琴

CSS:

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

目前没有一种方法可以通过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的内容后面。