Javascript 如何在不影响子div的情况下，在父div中使用Jquery淡入淡出背景图像？ 我有一个父div内容bg，其中包含背景图像 我得到了包含该内容的child div内容 问题是当背景图像在内容bg中淡入淡出时，内容div中的项目会淡入淡出 有人能帮我做些调整吗

HTML:

JQuery：

var images = ['pic1.jpg', 'pic2.jpg',   'pic3.jpg', 'pic4.jpg','pic5.jpg', 'pic6.jpg'];
$(function () {
    var i = 0;
    $(".content-bg").css("background-image", "url(pics/bg/" + images[i] + ")");
    setInterval(function () {
        i++;
        if (i == images.length) {
            i = 0;
        }
        $(".content-bg").fadeOut("slow", function () {
            $(this).css("background-image", "url(pics/bg/" + images[i] + ")");
            $(this).fadeIn("slow");

        });
    }, 6000);
});

---

您可以在与内容相同的级别上添加一个单独的div，并在其中设置一个图像，而不是将图像用作背景。现在，如果您将内容文本与此img顶部对齐，则可以淡入并淡出包含img的此div，而不会丢失内容文本

---

您现在只需淡出整个内容bg div，这意味着它也将淡出该div中的内容。

您可以在与内容相同的级别上添加单独的div，并在其中设置图像，而不是将图像用作背景。现在，如果您将内容文本与此img顶部对齐，则可以淡入并淡出包含img的此div，而不会丢失内容文本

---

您现在只是淡出整个内容bg div，这意味着它也将淡出该div中的内容。

不幸的是，您不能，尽管您可以通过使用“子对象”的绝对定位来产生这种错觉。：）@存款准备金率。。我试过绝对定位。。孩子们变得疯狂……不幸的是，你不能，尽管你可以通过使用“孩子”的绝对定位来产生这种错觉：）@存款准备金率。。我试过绝对定位。。孩子们发疯了…拉马尔。。我很困惑，你能详细说明一下吗。。我在同一级别上添加了一个单独的div，这让我不知所措。

包含img内容

现在你只能淡入淡出img。（$（'img.fadeInOut'）.fadeOut（））如果您在图像淡出时替换该图像，然后淡入，您应该能够获得想要的行为。您可以创建小提琴或类似的东西吗？Lamar。。我很困惑，你能详细说明一下吗。。我在同一级别上添加了一个单独的div，这让我不知所措。

包含img内容

现在你只能淡入淡出img。（$（'img.fadeInOut'）.fadeOut（））如果您在图像淡出时替换该图像，然后淡入，您应该能够获得想要的行为。您可以创建小提琴或类似的东西吗？

.col1{
   background-image: url("pics/behind.png");
   background-repeat: repeat;
   border-radius: 60px;
   border:5px dotted #e6ffff;
   text-align: center;
   font-family: "Goudy Old Style", Georgia, Serif;
   font-size: 18px;
   color: #FFFFF0;
   padding-left:30px;
   padding-right:30px;   
   height:auto;
   max-height:25%;
   }

.col2{
    background-color:transparent;
    height:auto;
    max-height:50%;
}

img {
    max-width: 100%;
    max-height: 100%;
}

.content-bg {
    overflow:hidden;
    position:relative;
    z-index:-1000;
    background: url(pics/bg.jpg) no-repeat center center fixed; 
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
    background-size: cover;
    height:100%;
    width: 100%;
}

.content-bg .row-r{
    z-index:1000;
    position:absolute;
    margin-left: auto;
    padding-top:30px;
    width: 80%;
    right:10%;
}

var images = ['pic1.jpg', 'pic2.jpg',   'pic3.jpg', 'pic4.jpg','pic5.jpg', 'pic6.jpg'];
$(function () {
    var i = 0;
    $(".content-bg").css("background-image", "url(pics/bg/" + images[i] + ")");
    setInterval(function () {
        i++;
        if (i == images.length) {
            i = 0;
        }
        $(".content-bg").fadeOut("slow", function () {
            $(this).css("background-image", "url(pics/bg/" + images[i] + ")");
            $(this).fadeIn("slow");

        });
    }, 6000);
});