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

4

我有一个主要的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
    }
});
3个回答

2
你需要将内容移出背景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; }

#stuff 不需要绝对定位,只有 #hpbg-image - Turnip

0

我建议尝试使用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
}

你可以在这里检查结果


0

我认为你的问题在答案 "CSS 背景透明度" 中已经很好地解决了。我会使用第三个响应,使用 CSS 的 ':before',因为该解决方案支持图像而不仅仅是颜色背景。


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接