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

回答

相关问题