好吧,我迷上了這個,需要一些快速的幫助。用CSS網址登錄頁面圖片不顯示
我有一個使用Forms身份驗證的ASP.NET應用程序。在我的Login.aspx頁面中,我使用背景中的幾張圖片來進行視覺效果。網址是使用文件中定義的CSS樣式設置的(不是在主題等)。所有圖像都位於網站根級下的圖像文件夾中。 Images文件夾中有一個單獨的web.config,允許所有用戶訪問。
我遇到的問題是讓圖像在開發環境和生產環境中一致解決。我學到的東西(無法控制)是當我們在Visual Studio中使用Cassini Web服務器進行開發時,該站點被部署到生產中的子站點。因此,使用反斜槓(/)開始每條路徑在生產中不起作用(儘管它在開發中可以正常工作)。刪除反斜槓會破壞開發環境。
目前,我已在CSS定義類似於:
#banner
{
background: transparent url('Images/plainBlueHeader2.png') no-repeat 20% 0;
height: 70px;
top: 21px;
left: 3px;
}
這並不在開發工作,但它在我們的QA和生產環境的工作。
更糟糕的是,這顯然工作正常,較少知情的同事指責最近增加了一些應用程序,我們在子文件夾中添加了多個新頁面。我應該提到,在此之前,所有頁面都位於網站根目錄。
不知道還有什麼我可以分享,所以請提出任何問題,以幫助提出解決方案。
更新: 事實證明,三個圖像之一是在所有環境中正確顯示。與BODY元素關聯的人正在工作,但其他人,一個使用上面示例中顯示的ID和另一個使用CSS類的ID不是。
UPDATE: 這裏是我的網頁代碼:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Login.aspx.cs" Inherits="Login" %>
<!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>Login</title>
<style type="text/css">
body { background:#fff url('Images/bodyBackBlue.png') repeat-x;font-size:11px;font-family:Sans-Serif; }
#wrapper { width:990px;margin-top:30px;margin-left:auto;margin-right:auto;position:relative; }
#bannerwrapper { width:990px;margin-left:auto;margin-right:auto;position:relative; }
#banner { background:transparent url('Images/plainBlueHeader2.png') no-repeat 20% 0;height:70px;top:21px;left:3px; }
.logo { float:left;text-decoration:none;margin-left:30px;margin-top:29px; }
.user-greeting { background-image:none;margin:8px 100px;color:#fff;float:right;font-weight:bold; }
.warningWrapper { float:none;font-family:Sans-Serif;font-size:small;margin-left:20px; }
#infowrapper { margin:3px 3px 3px 3px;width:68%;border-left:solid 1px #00629b; }
#rightColumnWrapper { margin:3px 13px 3px 3px;width:28%;float:right; }
#loginwrapper { height:220px;border-left:solid 1px #00629b;margin-bottom:20px; }
#noticewrapper { height:100px;border-top:1px solid #00629b;margin-bottom:20px; }
.contentTopper { overflow:hidden;position:static;background:transparent URL('Images/portlet_topper_back.png') left repeat-x;height:23px;min-height:23px; }
.contentTitle { float:left;color:#fff;font-weight:bold;font-size:15px;padding-top:2px;padding-left:4px; }
.contentleft { padding:20px 5px 5px 8px;float:left;width:400px; }
.contentRight { float:right;padding:30px 20px 10px 10px; }
.content { padding-left:5px; }
</style>
</head>
<body>
<div id="bannerwrapper">
<div id="banner">
<span class="logo"><img id="LogoImage" src="Images/LogoLarge.jpg" height="40px" width="105px"/></span>
<span class="user-greeting">Welcome!</span>
</div>
</div>
<div id="wrapper">
<div id="rightColumnWrapper">
<div id="loginwrapper">
<div class="contentTopper">
<span class="contentTitle"> Sign In </span>
</div>
<div class="content">
<form id="Login" runat="server">
<asp:Panel ID="PanelLogin" runat="server">
<table>
<tr>
<td>
<asp:Label ID="LabelUserName" runat="server">User name:</asp:Label>
</td>
</tr>
<tr>
<td width="150">
<asp:TextBox ID="txtUsername" runat="server" Height="20px"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="LabelPassword" runat="server">Password:</asp:Label>
</td>
</tr>
<tr>
<td width="150">
<asp:TextBox ID="txtPassword" runat="server" TextMode="Password" Height="20px" Width="100%" ></asp:TextBox><br />
</td>
</tr>
<tr>
<td width="80" style="padding: 5px">
<asp:Button ID="btnLogin" runat="server" EnableTheming="true" Text="Sign In" OnClick="btnLogin_Click"></asp:Button><br />
</td>
</tr>
</table>
<asp:Label ID="errorLabel" runat="server" ForeColor="#ff3300"></asp:Label><br />
</asp:Panel>
</form>
</div>
</div>
<div id="noticewrapper">
<div class="contentTopper">
<span class="contentTitle"> Special Notice </span>
</div>
<div class="content">
<ul>
<li>abc</li>
</ul>
</div>
</div>
</div>
<div id="infowrapper">
<div class="contentTopper">
<span class="contentTitle"> Welcome </span>
</div>
<div class="contentleft">
<p><span style="font-size: small"><b>abc</b></span></p>
<p>abc</p>
<p><b>abc</b>abc</p>
<p><b>abc</b>abc</p>
<p> </p><p> </p>
</div>
<div class="contentRight">
<img class="contentRight" id="LogoImage2" src="Images/LogoLarge.jpg" height="79px" width="199px"/>
<p style="text-align: center">abc</p>
</div>
</div>
<div class="warningWrapper">
<asp:Label ID="Label1" runat="server" ForeColor="#FF0000" ></asp:Label>
<asp:Label ID="Label2" runat="server" ForeColor="#FF0000" Visible="false" Text="abc"></asp:Label>
<asp:Label ID="Label3" runat="server" ForeColor="#FF0000" Visible="false" Text="abc"></asp:Label>
<asp:Label ID="Label4" runat="server" ForeColor="#993300" Visible="false" Text="abc"></asp:Label>
</div>
</div>
</body>
</html>
我沒有看到語法錯誤,檢查路徑 – Starx 2010-11-17 13:52:57