Question

我有一个带有背景图像的主div，它填满了屏幕。我希望这个图像能够不断改变，哪个工作正常。我遇到的问题是背景div顶部的div也逐渐消失，所以基本上整个页面都是空白的。我怎么能这样才能淡出背景但将剩下的内容留在屏幕上。非常感谢您对此问题的任何建议！

HTML

     <div id="hpbg-image">
   <div id="header">
      <div id="logo"><img src="images/logo.png"></div>
      <div id="login"><img src="images/login.png"></div>
      <div id="menu">

      </div>
   </div><!--Header End-->
    <div id="search-area">
        <div id="holder1">
             <img src="images/slogan.png"><br>
             <div id="searchbox">

             </div>
        </div>
     </div>
    </div>
    <div id="content1" style="height:150px">No minimum contract, pay for everything online</div>
        <div id="howitworks">
            <b>How it works</b>
        </div>
    <div id="freelancers" style="height:300px">

</div>

CSS

#hpbg-image {
    position: relative;
    height: 100%;
    width: 100%;
    background: url(images/image1.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}

#menu {
     padding-top:20px;
     padding-right:170px;
     position: absolute;
     right:0;
     color: #ffffff;
     font-family: 'Verdana',serif;
}

#login {
     padding-top:8px;
     padding-right:50px;
     position: absolute;
     right:0;
}

#holder1 {
    margin: 0;
    position: absolute;
    top: 40%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width:838px;
}

#searchbox {
    height:78px;
    width:458px;
    background: url(images/searchbg.png);
    background-repeat: no-repeat;
    padding-top: 22px;
    padding-bottom: 18px;
    padding-left:40px;
    text-align: center;
    margin: 0 auto;
}

的jQuery

$(document).ready(function() {

    var images = [];
    images[0] = "images/image1.jpg";
    images[1] = "images/image2.jpg";
    images[2] = "images/image3.jpg";

    var i = 0;
    setInterval(fadeDivs, 2000);

    function fadeDivs() {
        //start with id = 0 after 5 seconds

        $('#hpbg-image').css("background-image", "url("+images[i]+")").fadeOut(500, function() {
            $(this).css("background-image", "url("+images[i]+")").fadeIn(500);
        });

        i++;

        if (i == 3) 
            i = 0; //repeat from start
    }
});

Answer 1

您必须将内容移出背景div。所以你可以隐藏div而不隐藏内容。

使用position:absolute将内容置于后台：

<div id="hpbg-image">
</div>
<div id="stuff">
    <div id="header">
      <div id="logo"><img src="images/logo.png"></div>
      <div id="login"><img src="images/login.png"></div>
      <div id="menu">

      </div>
    </div><!--Header End-->
    <div id="search-area">
        <div id="holder1">
             <img src="images/slogan.png"><br>
             <div id="searchbox">

             </div>
        </div>
     </div>
    </div>
    <div id="content1" style="height:150px">No minimum contract, pay for everything online</div>
        <div id="howitworks">
            <b>How it works</b>
        </div>
    <div id="freelancers" style="height:300px">
    </div>

</div>

现在在两个根div上使用position:absolute

#hpbg-image{ position:absolute; }
#stuff{ position:absolute; }

Answer 2

我认为您的问题已在答案＆＃34; CSS Background Opacity＆＃34;中得到了充分体现。我使用CSS＆＃39;使用第三个响应：之前＆＃39;因为该解决方案支持图像而不仅仅是彩色背景，如某些响应。

Answer 3

我尝试使用CSS3，显然，如果浏览器不支持CSS3，这将无法正常工作。

在你的css中：

#hpbg-image {
  ...
  transition: background 1s linear;// Add this line to your CSS.
  ...
}

在你的js中：

function fadeDivs() {
    //start with id=0 after 5 seconds

    $('#hpbg-image').css("background-image", "url("+images[i]+")");
    i++;
    if (i==3) i=0; //repeat from start
}

您可以查看结果here

淡出div背景会影响背景图像上的其他div

3 个答案: