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

Posted 2023-03-06

【中文标题】淡出 div 背景会影响背景图像顶部的其他 div

【英文标题】：Fade out of div background affects other divs on top of background image

【发布时间】：2015-03-09 00:44:03

【问题描述】：

我有一个带有背景图像的主 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
    
);

【参考方案1】：

我会尝试使用 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

【参考方案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

【参考方案3】：

我认为答案“CSS Background Opacity”很好地涵盖了您的问题。我会使用 CSS ':before' 的第三个响应，因为该解决方案支持图像，而不仅仅是像某些响应那样的彩色背景。