背景图像不透明度淡出整个元素

时间:2013-11-12 22:04:07

标签: javascript jquery

我有一个带背景图像的div元素,我正试图用Jquery淡入淡出背景图像。 到目前为止,该功能运行良好,但它淡出了整个div而不仅仅是我想要的背景。

function rentPics()
{
    $('#d2').css('background-image','url(' + mazdaArr[1] + ')');
    interID=setInterval (changeImage,3000);
}

function changeImage()
    {
        $('#d2').animate({opacity: 0}, 1500, function(){
        $('#d2').css('background-image', 'url(' + mazdaArr[x] + ')');
        }).animate({opacity: 1}, 1500);
        x++;
        if (x==mazdaArr.length)
        {
            x=1;
        }
    }

4 个答案:

答案 0 :(得分:2)

如果您正在寻找简单轻量级的交叉渐变,请使用CSS transition。这不会影响元素内的textborderbox-shadow

transition: background-image 1s ease-in-out;
-webkit-transition: background-image 1s ease-in-out;
-moz-transition: background-image 1s ease-in-out;
-ms-transition: background-image 1s ease-in-out;
-o-transition: background-image 1s ease-in-out;

查看此fiddle

Chrome,Safari和Opera都支持它,但我对Firefox和IE不太确定

如果您有更大的图像列表要循环播放。您可能还想首先考虑缓存图像URL,因为我注意到第一次使用时会出现一些闪烁/闪烁。在此处查看解决方案 - Preloading CSS Background Images

答案 1 :(得分:0)

应用不透明度淡化到整个div与背景图像包括,你可以这样做,在div后面创建一个你想要应用淡入和淡出的图层。

答案 2 :(得分:0)

您可以添加或删除类,而不是使用jQuery来设置不透明度的动画。然后向CSS添加过渡,这将产生您想要的结果。下面的东西可能会起作用。您可以看到CSS转换here的文档。唯一的缺点是IE,平常。

.element {
  -webkit-transition: ease 0.2 all;
  -moz-transition: ease 0.2 all;
  -o-transition: ease 0.2 all;
  -ms-transition: ease 0.2 all;
  transition: ease 0.2 all;
}

答案 3 :(得分:0)

使用具有绝对定位叠加层的相对容器。您的HTML应如下所示:

<div id="d2" class="image-wrapper">
  <img src="/img/1.jpg" />
  <div class="overlay"> your text goes here </div>
</div>

...和你的CSS:

.image-wrapper {
    position: relative;
}
.image-wrapper .overlay {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    overflow: auto;
}
.image-wrapper img {
    display: block;
}

现在,您可以更改图像的不透明度,而无需更改ovelay中的内容。