繁体   English   中英

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

[英]How can I fade are background image in and out using Jquery in a parent div without having it affect the child div?

  1. 我有一个父div内容-bg,其中包含背景图像淡入淡出
  2. 我有子div内容,其中包含该内容
  3. 问题是当background-image淡出和淡出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);
});

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

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

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM