html - 无法将图像添加到登录页面

Question

首先是login.aspx页面的代码:

<%@ Page Title="Log In" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
CodeBehind="Login.aspx.cs" Inherits="DoubleEntryForm.Account.Login" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<h2>
    &nbsp;Log In
</h2>
<%--<p>
    Please enter your username and password.
    <asp:HyperLink ID="RegisterHyperLink" runat="server" EnableViewState="false">Register</asp:HyperLink> if you don't have an account.
</p>--%>
<asp:Login ID="LoginUser" runat="server" EnableViewState="false" RenderOuterTable="false" DestinationPageUrl="~/Destruction Form.aspx">
    <LayoutTemplate>
        <span class="failureNotification">
            <asp:Literal ID="FailureText" runat="server"></asp:Literal>
        </span>
        <asp:ValidationSummary ID="LoginUserValidationSummary" runat="server" CssClass="failureNotification" 
             ValidationGroup="LoginUserValidationGroup"/>
        <div class="accountInfo">
            <fieldset class="login">
                <legend>Account Information</legend>
                <p>
                    <asp:Label ID="UserNameLabel" runat="server" AssociatedControlID="UserName">Username:</asp:Label>
                    <asp:TextBox ID="UserName" runat="server" CssClass="textEntry"></asp:TextBox>
                    <asp:RequiredFieldValidator ID="UserNameRequired" runat="server" ControlToValidate="UserName" 
                         CssClass="failureNotification" ErrorMessage="User Name is required." ToolTip="User Name is required." 
                         ValidationGroup="LoginUserValidationGroup">*</asp:RequiredFieldValidator>
                </p>
                <p>
                    <asp:Label ID="PasswordLabel" runat="server" AssociatedControlID="Password">Password:</asp:Label>
                    <asp:TextBox ID="Password" runat="server" CssClass="passwordEntry" TextMode="Password"></asp:TextBox>
                    <asp:RequiredFieldValidator ID="PasswordRequired" runat="server" ControlToValidate="Password" 
                         CssClass="failureNotification" ErrorMessage="Password is required." ToolTip="Password is required." 
                         ValidationGroup="LoginUserValidationGroup">*</asp:RequiredFieldValidator>
                </p>
                <p>
                    <asp:CheckBox ID="RememberMe" runat="server"/>
                    <asp:Label ID="RememberMeLabel" runat="server" AssociatedControlID="RememberMe" CssClass="inline">Keep me logged in</asp:Label>
                </p>
            </fieldset>
            <p class="submitButton">
                <asp:Button ID="LoginButton" runat="server" CommandName="Login" Text="Log In" ValidationGroup="LoginUserValidationGroup"/>
            </p>
        </div>
    </LayoutTemplate>
</asp:Login>

在此页面上，我尝试添加一些 CSS 样式，但我尝试的所有方法都不起作用。这是样式:

<style type="text/css">

body{
    margin:0;
    padding:0;
    background-color:#eae9e9;}

#scan-table-wrapper {
    width: 968px;
    margin: 0 auto 0 auto;
    background-image: url("Images/wrapper-bg.png");}    

#scan-table-body{
    margin:0 30px 0 30px;
    padding-top:30px;}

.auto-style1 {
    width: 880px;
    height: 100px;}

</style>

我也在尝试添加标题图片。但是，如果我将代码放在 HeaderContent 部分，看起来它试图显示标题图像但失败了，并且根本不显示背景(失败，我的意思是显示一个空框，上面有一个小的红色 X在里面)。如果我将它放在 MainContent 中，它会声明我不能将样式放在 div 中。但是，我没有将它放在 div 中，而是将它放在 MainContent 开始位置正下方的一行中。

这是我第一次大量接触CSS，所以有点生疏。我应该把它们放在哪里才能正确显示在我的页面上？

Answer 1

事实上，您的标签将进入 HeadContent 内容。如果您看到带有红叉的图像，则表示 css 工作正常但无法在您提到的目录中找到该图像。请使用 ../ 设置适当的路径，这意味着向上一个目录。

例如如果你的元素结构是这样的

Root -> Images/wrapper-bg.png
     -> Pages/Your Aspx pages

在你的 aspx 页面中你有你的风格然后你必须使用

background-image: url('../Images/wrapper-bg.png');}//使用单引号

../会将您移出页面目录并将您置于根目录中，在上述情况下，然后 Images/Wrapper-bg.png 和路径将得到满足。就这样。

body 背景

将您的 css 移动到母版页的 Head 部分。确保没有更多的 css 用于从外部 css 或内联 css 应用的正文。

处理CSS的好方法

在您的元素中添加一个样式表，将其命名为 style.css 或您喜欢的任何名称。将 css 文件拖放到您的母版页标题部分，它会自动添加其引用。现在开始在该文件中编写您的 css。所有子页面都将根据您的说明自动继承该文件的样式。您也可以使用一些第三方 CSS 编辑器来轻松编写 css 和学习。我一般用Rapid CSS .

必须试一试

我最喜欢的模式是 .Net 本身与 Jetbrains Resharper。太棒了!!