2010-11-17 88 views
3

好吧,我迷上了這個,需要一些快速的幫助。用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>&nbsp;</p><p>&nbsp;</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> 
+0

我沒有看到語法錯誤,檢查路徑 – Starx 2010-11-17 13:52:57

回答

6

後全部回的往復討論,我發現這個職位:ASP.NET theme not rendering correctly。我現在意識到問題是由於Cassini在App_Themes文件夾中執行的授權規則。因爲我正在使用Forms身份驗證,所以Login.aspx頁面將顯示給未經身份驗證的用戶,並且Cassini不允許該頁面訪問App_Themes中的任何內容。出於某種原因,我想,這阻止了其餘的CSS樣式被應用。

然而,最終的解決辦法是添加以下到我的web.config:

<location path="App_Themes"> 
    <system.web> 
     <authorization> 
     <allow users="*" /> 
     </authorization> 
    </system.web> 
    </location> 

我要感謝@matt_ashbury爲指導 - 我無法找到沒有你的幫助的解決方案!

+0

這是一個很好的答案,並且幫助我糾正了我繼承的應用程序上的相同問題,並且在服務器上工作,但不在登錄屏幕的開發框中。我希望有一種方法可以將這些推到谷歌的前端! – FSBarker 2011-06-13 18:50:53

0

如果 - 如我想象的 - 你必須在圖像的同一級別的文件夾css文件夾中,那麼你也可以寫

background: transparent url(../Images/plainBlueHeader2.png) no-repeat 20% 0; 

您可以使用相對路徑 (除此之外,還可以避免尾隨引號)引用圖像。

+0

不幸的是,Images文件夾與我的Login.aspx頁面處於同一級別,所以使用../將強制運行時嘗試爬上文件夾層次結構以查找圖像不是它在任何環境中的位置。 – SonOfPirate 2010-11-17 14:01:05

1

使用此

#banner 
{ 
    background: transparent url('<%= Page.ResolveUrl("~/Images/plainBlueHeader2.png") %>') no-repeat 20% 0; 
} 

它比使用更安全。作爲你的圖像位置可以很容易地移動

+0

此解決方案的兩個問題。其中一個例外 - 我可能錯誤地輸入了一些內容。不過,使用波浪號(〜)並不是解決方案,因爲它告訴運行時該路徑與站點根目錄相關。在開發中,這很好,因爲路徑類似於http:// localhost:1234/Login.aspx。在生產中,它不起作用,因爲應用程序運行在根站點下的文件夾中,如http://server/root/Login.aspx。 (順便說一下,Images文件夾與Login.aspx位於同一文件夾中)。 – SonOfPirate 2010-11-17 13:59:19

1

如何:

url(./Images/plainBlueHeader2.png) 
+0

仍然沒有在開發環境中工作。 – SonOfPirate 2010-11-17 14:16:38

+0

只是出於興趣,如果您將身體標記中使用的圖像與#banner中的圖像進行交換,是仍然顯示圖像還是現在對身體有效? – 2010-11-17 14:23:12

+0

有趣。是的,當我切換圖像時,BODY標記仍然正確渲染(使用plainBlueHeader2.png),原始圖像不顯示#banner。 – SonOfPirate 2010-11-17 14:27:04