div分層無法正常工作：CSS

我想爲整個頁面製作一個半透明的背景圖片，其餘的內容覆蓋在它上面（不透明）。但是，當我嘗試對div進行分層時，pagecontent也是半透明的。我已經嘗試過切換z-index並且不會改變任何東西。div分層無法正常工作：CSS

這裏有兩個相關的樣式

#backgroundImage 
{ 
    background-image: url('/Images/background.jpg'); 
    background-size: 100%; 
    opacity: 0.5; 
    height: 100%; 
    width: 100%; 
    position: absolute; 
    z-index: 1; 
} 

#PageWrapper 
{ 
    z-index: 2; 
}

，這裏是頁面標記

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Frontend.master.cs" Inherits="PTMS.MasterPages.Frontend" %> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 

<head runat="server"> 
    <title></title> 
    <asp:ContentPlaceHolder ID="head" runat="server"> 
    </asp:ContentPlaceHolder> 
    <link href="../Styles/Styles.css" rel="stylesheet" type="text/css" /> 
</head> 

<body>  
    <form id="form1" runat="server"> 
     <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="True"> 
      <Scripts> 
       <asp:ScriptReference runat="server" Path="~/Scripts/jquery-1.4.1.min.js"/> 
      </Scripts> 
     </asp:ScriptManager> 
     <div id="backgroundImage"> 
     <div id="PageWrapper" > 
      <div id="Header"> 
       <asp:SiteMapPath ID="MainMenuSiteMapPath" runat="server"></asp:SiteMapPath> 
      </div> 
      <div id="RightSide"> 
       <UserControls:Sidebar ID="RightSidebar" runat="server" /> 
      </div> 
      <div id="LeftSide"> 
       <UserControls:Navbar ID="LeftSidebar" runat="server" /> 
      </div> 
      <div id="MainContent">     
       <asp:ContentPlaceHolder ID="cpMainContent" runat="server">   
       </asp:ContentPlaceHolder> 
      </div> 

      <div id="Footer"> 
       <asp:LoginName ID="LoginName1" runat="server" FormatString="Logged in as {0}" /> 
       <LoggedInTemplate> 
        (<asp:LoginStatus ID="LoginStatus1" runat="server" />) 
       </LoggedInTemplate> 
      </div> 
     </div> 
     </div> 
    </form> 
</body> 

</html>

來源

2013-02-20 Chris V.

你在用什麼瀏覽器工作？ – Rikon 2013-02-20 02:19:08

如果你使用'opacity'，所有的子'div'元素也是透明的。你想用'rgba'代替。 – 2013-02-20 02:20:22

我會調查並回復你 - 感謝提示:) – 2013-02-20 02:20:46

爲了使的z-index工作，你還需要有position: absolute, relative, or fixed。

所以你的PageWrapper風格沒有任何這個位置值，所以它不起作用。

此外backgroundImage層必須是獨立的，並且pageWrapper不能在他內部。

看到最終效果：http://jsfiddle.net/EnUaK/

來源

2013-02-20 02:22:12 Aristos

解決的問題。我移動了backgroundImage div的結束標記，以便它不再包裝PageWrapper div，然後設置backgroundImage div的不透明度並添加位置：absolute;到我的PageWrapper。

來源

2013-02-20 02:33:10

div分層無法正常工作：CSS

回答

相關問題