Question

我有一个父div div -bg，其中包含背景图片渐变
我有包含内容的子div内容
问题是当background-image淡出和淡出content-bg时，内容div中的项目会淡入淡出
有人可以指导我完成我需要做的调整吗？

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中的内容。

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

1 个答案: