2010-11-17 204 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