好吧,我迷上了这个,需要一些快速的帮助。用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