淡出div背景影響其他divs在背景圖片之上

我有一個背景圖像填充屏幕的主要div。我希望這個圖像能夠不斷改變哪些工作正常。我遇到的問題是在背景div頂部的div也正在淡出，所以基本上整個頁面都是空白的。我怎麼能這樣才能淡出背景，而將剩下的內容留在屏幕上。非常感謝您對這個問題的任何建議！淡出div背景影響其他divs在背景圖片之上

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 
    } 
});

來源

2015-01-10 steveIRL

您必須將內容移出背景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; }

來源

2015-01-10 22:43:24 Fuzzyma

'＃stuff'將不需要被絕對定位。只有＃＃hpbg-image' – Turnip

正確 - 只是我的風格 – Fuzzyma

謝謝你！ – steveIRL

我覺得你的問題是在「CSS Background Opacity」的答案中已經涵蓋了。我會使用第三個使用CSS'：before'的響應，因爲該解決方案支持圖像，而不僅僅是像某些響應那樣的顏色背景。

來源

2015-01-10 22:41:15 stealthwang

我想嘗試用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

來源

2015-01-10 23:00:45 acontell

淡出div背景影響其他divs在背景圖片之上

回答

相關問題