div 分层无法正常工作：CSS答案

【问题标题】：div layering not working properly : CSSdiv 分层无法正常工作：CSS
【发布时间】：2013-02-20 02:17:02
【问题描述】：

我正在尝试为整个页面制作一个半透明的背景图片，并将其余内容分层（不透明）。但是，当我尝试对 div 进行分层时，页面内容也是半透明的。我已经尝试切换 z-indexes，但这并没有改变任何东西。

这里有两种相关的样式

#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>

【问题讨论】：

你使用什么浏览器？
如果你使用opacity，所有div子元素也将是透明的。你想改用rgba。
我会调查并回复您 - 感谢您的提示 :)
解决了内容透明的问题，但现在我的背景不透明。 ://

标签： asp.net css html layer

【解决方案1】：

解决了这个问题。我移动了 backgroundImage div 的结束标记，因此它不再包装 PageWrapper div，然后设置 backgroundImage div 的不透明度并添加 position: absolute;到我的 PageWrapper。

【讨论】：

【解决方案2】：

要使 z-index 工作，您还需要拥有position: absolute, relative, or fixed。

所以你的PageWrapper 样式没有任何这个位置值，所以它不起作用。

另外 backgroundImage 层必须是单独的，pageWrapper 不能在他里面。

查看最终结果：http://jsfiddle.net/EnUaK/

【讨论】：