Question

好的，我很难接受这个，需要一些快速的帮助。

我有一个使用Forms身份验证的ASP.NET应用程序。在我的Login.aspx页面中，我在后台使用了几个图像来获得视觉效果。 url是使用文件中定义的CSS样式设置的（不在主题等中）。所有图像都位于网站根目录下的Images文件夹中。 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;
}

这在开发中不起作用，但它适用于我们的质量检查和生产环境。

更糟糕的是，这显然工作得很好，而且知识较少的同事正在责备最近添加到应用程序的内容，我们在子文件夹中添加了几个新页面。我应该提一下，在此之前所有页面都在站点根目录。

不确定我还能分享什么，所以请提出任何问题，以帮助提出解决方案。

更新事实证明，三个图像中的一个在所有环境中都能正常显示。与BODY元素相关联的元素正在工作，但其他元素，一个使用上面示例中显示的ID，另一个使用CSS类，则不是。

更新这是我的网页代码：

<%@ 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>

Answer 1

经过所有来回讨论，我发现了这篇文章：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的指导 - 没有你的帮助我找不到解决方案！

Answer 2

使用此

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

它比使用...更安全，因为您的图像位置可以轻松移动

Answer 3

怎么样：

url(./Images/plainBlueHeader2.png)

Answer 4

如果 - 正如我想象的那样 - 你在图像文件夹的同一级别有一个文件夹css，那么你也可以写

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

您可以使用相对路径引用图像（除此之外，您还可以避免尾随引号）。

没有显示CSS网址的登录页面图像

4 个答案: