我正在尝试为整个页面创建一个半透明的背景图像,其余的内容层叠在其上(不透明)。但是,当我尝试对div进行分层时,pagecontent也是半透明的。我已经尝试过切换z-index,这不会改变任何东西。
这里有两个相关的样式
#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>
答案 0 :(得分:0)
要使 z-index 工作,您还需要position: absolute, relative, or fixed
。
所以你的PageWrapper
样式没有任何这个位置值,所以它不起作用。
此外,backgroundImage图层必须是单独的,而pageWrapper不得在他内部。
查看最终结果:http://jsfiddle.net/EnUaK/
答案 1 :(得分:0)
解决了这个问题。我移动了backgroundImage div的结束标记,因此不再包装PageWrapper div,然后设置backgroundImage div的不透明度并添加position:absolute;到我的PageWrapper。