如何在父 div 中使用 Jquery 淡入和淡出背景图像而不影响子 div？

Question

1. 我有一个父 div content-bg，其中包含背景图像褪色
2. 我有包含内容的子 div 内容
3. 问题是当背景图像在 content-bg 中淡入和淡出时，内容 div 中的项目会淡入和淡出
4. 有人可以指导我完成我需要做的调整吗？

HTML：

<div class = "content-bg" style = "height:auto;">
  <div class="container-fluid">
    <div class="row row-r">
      <div class="col-sm-5 col1"> <img src="pics/texts/wel.png" style = "width:80%;height:80%x;display: block;margin-left: auto;margin-right: auto; padding-bottom:10px; padding-top:30;" class="img-responsive"></img>
        <p >Hey everyone, thank you for taking the time to check out our website.This is the place you’ll find every piece of information you will need regarding our wedding celebration. </p>
        <p> We are so excited to be spending this special time with friends and family we hold so dear to our hearts.</p>
        <p>Gerrant and I can't wait for this wonderful day and we hope you will join us in each step we take as we come closer to our big day. </p>
        <h3>Let the celebration begin!</h3>
      </div>
      <div class="col-sm-7 col2" ><img src="pics/img1.png" alt="" style = "width:100%;height:100%x;"></div>
    </div>
    <!-- end row--> 
  </div>
  <!-- end container--> 
</div>
<!-- end of contentbg-->

CSS：

.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%;
}

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);
});

Answer 1

您可以在与内容相同的级别上添加一个单独的 div 并在那里设置图像，而不是使用图像作为背景。现在，如果你在这个 img 上对齐内容文本，你可以淡入和淡出这个包含 img 的 div 而不会丢失内容文本。

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