我创建了一个.aspx页面。该页面包含一个面板,在面板内有两个更新面板(右面板,左面板)。左侧更新面板中有两个div
标记,一个表示左侧更新面板的上半部分,另一个div
表示左侧更新面板的底部。右侧更新面板也是如此。左侧更新面板中的底部div
具有Gridview。
我想在整个面板上添加一个(不重复)背景图像,以便背景图像覆盖整个面板区域。当我向面板添加背景图像时,它只覆盖左上角的更新面板和右上角的更新面板,从而使两个更新面板的底部都保持裸露。
我还使用user controls
来表示Header,Left Navigation面板和Right滑动面板。但我不希望背景图像应用于标题或两个侧面板,只是中心面板。
我尝试将BackgroundImageURL
提供给面板,并使用CssClass
属性链接到包含背景图片的css类。
这是我的代码(.aspx):
<body>
<Header:main runat="server" ID="header"></Header:main>
<Leftpnl:left runat="server" ID="pnlLeft"></Leftpnl:left>
<RightPnl:right runat="server" ID="pnlRight"></RightPnl:right>
<div class="Title">
<h2>Tickets</h2>
<hr class="Sub_Title_HR" />
</div>
<form runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:Panel ID="Pnl_New_First" runat="server">
<div class="Sub_Heading">
<asp:Label ID="Sub_1" runat="server" Text="Plan Your Trip"></asp:Label>
</div>
<asp:Panel ID="Panel_1" runat="server" CssClass="Pnl_BG">
<div class="New_Left">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<table>
<tr>
<td class="Cell_Size">
<asp:Label ID="New_Dep_Title" runat="server" Text="Departure"></asp:Label>
</td>
<td class="Cell_Size">
<asp:Label ID="New_Arr_Title" runat="server" Text="Arrival"></asp:Label>
</td>
<td class="Cell_Size">
<asp:Label ID="New_Date_Title" runat="server" Text="Date"></asp:Label>
</td>
</tr>
<tr>
<td class="Cell_Size">
<asp:DropDownList ID="New_Dep_DDL" CssClass="DDL" runat="server">
<asp:ListItem>IND</asp:ListItem>
<asp:ListItem>KUL</asp:ListItem>
</asp:DropDownList>
</td>
<td class="Cell_Size">
<asp:DropDownList ID="New_Arr_DDL" CssClass="DDL" runat="server">
<asp:ListItem>CMB</asp:ListItem>
<asp:ListItem>KUL</asp:ListItem>
</asp:DropDownList>
</td>
<td>
<telerik:RadDatePicker ID="New_Date1" Skin="Default" runat="server" DateInput-DateFormat="dd-MMM-yyyy" style="margin-left: 0px">
</telerik:RadDatePicker>
</td>
<td>
<asp:Button ID="New_Search" runat="server" Text="Search" />
</td>
</tr>
<br /><br />
</table>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<table id="UL_Outbound_Tab">
<tr>
<td id="New_Outbound_Head">Outbound : <asp:Label ID="Dep_Airport" runat="server" Text=""></asp:Label> To <asp:Label ID="Arr_Airport" runat="server" Text=""></asp:Label>
</td>
</tr>
<asp:GridView ID="New_Outbound_Grid" runat="server">
</asp:GridView>
<tr>
<td>
<asp:Button ID="New_Add" runat="server" Text="Add" />
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
</div>
<div class="New_Right">
<asp:UpdatePanel ID="UpdatePanel3" runat="server">
<ContentTemplate>
<asp:Label ID="New_My_Trip_Head" runat="server" Text="My Trip"></asp:Label>
<table id="New_My_Trip_Tab">
<asp:GridView ID="My_Trip_Grid" runat="server">
</asp:GridView>
</table>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="UpdatePanel4" runat="server">
<ContentTemplate>
<asp:Label ID="New_Tick_Val_Head" runat="server" Text="Ticket Validity Period"></asp:Label>
<table id="New_Tick_Val_Tab">
<tr>
<td>
<asp:Label ID="Val_From" runat="server" Text="Valid From : "></asp:Label>
</td>
<td>
<telerik:RadDatePicker ID="Val_From_Date" Skin="Default" runat="server" DateInput-DateFormat="dd-MMM-yyyy" style="margin-left: 0px"></telerik:RadDatePicker>
</td>
<td style="width: 100%">
<asp:Label ID="Val_To" runat="server" Text="Valid To : "></asp:Label>
</td>
<td>
<telerik:RadDatePicker ID="Val_To_Date" Skin="Default" runat="server" DateInput-DateFormat="dd-MMM-yyyy" style="margin-left: 0px"></telerik:RadDatePicker>
</td>
</tr>
<caption>
<tr style="margin-top: 5%">
<td style="width: 35%">
<asp:Label ID="Val_Com" runat="server" Text="User Comments : "></asp:Label>
</td>
<td>
<asp:TextBox ID="Val_Com_Txt" runat="server" Rows="5" TextMode="MultiLine" style="width: 150%; resize: none" placeholder="Text Here"></asp:TextBox>
</td>
</tr>
</caption>
</table>
<asp:ImageButton class="next1 Left_Right_Controls" runat="server" OnClientClick="next1()" ImageUrl="~/Images/Buttons/page_right_arrow.png" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
</asp:panel>
<div id="step_init" class="Steps">
<img src="Images/Steps/1.png" alt="" />
</div>
</asp:Panel>
</form>
</body>
这是我的CSS:
.Pnl_BG {
background-image: url(../Images/travelling.jpg);
background-size:100% 100%;
background-repeat: no-repeat;
}
请帮忙......