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

<强> Demo Fiddle

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属性将文本放在图像顶部：

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/

仅针对背景图像的CSS3过渡

3 个答案: