Javascript jQuery交叉淡入css背景图像

我希望背景图像交叉淡入淡出或交叉溶解，而不是纯粹的淡入淡出。我看过很多教程，它们都涉及使用

img

标记，而我使用

background image

css属性设置背景

$(window).load(function() {
    storeOpen();
    var i = 0;
    var images = ['http://ascendspa.com/wellness/wp-content/uploads/2014/07/Vayo-Massage.jpg?w=261&h=196&crop=1', 'http://massagehaveneagan.webstarts.com/uploads/massage.jpg'];
    var image = $('#bg-image');
    //Initial Background image setup
    image.css('background-image', 'url(http://massagehaveneagan.webstarts.com/uploads/massage.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);
});

HTML

  <div>
        <div class="container">
            <div class="row">
                <div id="bg-image"></div>
                <div class="col-sm-7 col-lg-7 main">
                    <h1>Get A Massage Today!</h1>
                </div>
                <div class="col-sm-5 col-lg-5 main1 order">
                    <h2>Make an Appointment Today!</h2>
                    <button class="btn btn-primary btn-large dropdown-toggle" type="button" data-toggle="dropdown">Haircut <span class="caret">&nbsp;</span></button>
                    <button class="btn btn-primary btn-large dropdown-toggle" type="button" data-toggle="dropdown">Massage <span class="caret">&nbsp;</span></button>
                    <button class="btn btn-primary btn-large dropdown-toggle" type="button" data-toggle="dropdown">Healing <span class="caret">&nbsp;</span></button>
                    <p class=hometext>Get the pampering you deserve. We offer haircuts, massages, and more.</p>
                </div>
            </div>
        </div>
    </div>

---

您的问题是…？您不能通过更改

src

来交叉淡入淡出。要交叉淡入淡出，您需要多个元素彼此重叠淡入淡出。您也不应该仅使用

z-index:-1

来设置内容后面的图像。我想这就是我想要的答案。

#bg-image {
    background: url(images/home2.jpg);
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    margin-top: 0px;
    z-index: -1;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}