Question

我要解决一个相对简单的问题。我正在尝试修复包含页面上图像的背景div（<div class="main-background">）。它出现在Visual Studio的“设计视图”中，但是当我运行该应用程序时，它不显示（或被覆盖）。其他控件确实出现。我在这里做什么错了？

<div class="main-background">
  <div class="center">
    <asp:Panel ID="pnlOptions" runat="server" BackColor="#669999" HorizontalAlign="Center" Height="55px" Width="607px" BorderStyle="Double">
      <div style="vertical-align: top">
        <asp:Label ID="lblAvailableOptions" runat="server" Text="Available Options" Font-Size="X-Large" Font-Bold="True" ForeColor="Black" Font-Names="Trebuchet MS" Style="vertical-align: bottom"></asp:Label>
      </div>
    </asp:Panel>
  </div>
  <br />
  <br />
  <br />
  <asp:Panel ID="pnlButtons" runat="server" HorizontalAlign="Center">
    <asp:Button ID="btnGroupSummary" runat="server" Text="Group Summary" CssClass="btn btn-mainmenu" OnClick="btnGroupSummary_Click" BackColor="#3D5C5C" /><br />
    <br />
    <asp:Button ID="btnServices" runat="server" Text="Services" CssClass="btn btn-mainmenu" BackColor="#527A7A" /><br />
    <br />
    <asp:Button ID="btnLetters" runat="server" Text="Letters" CssClass="btn btn-mainmenu" BackColor="#94B8B8" />
  </asp:Panel>
</div>

div类“ main-background”具有以下CSS：

.main-background {
  background: url(../Images/main-background.JPG) center fixed;
  background-size: 800px, 800px, auto;
}

任何帮助将不胜感激。

Answer 1

更改CSS并仅添加“高度：800像素；”

.main-background {
  background: url(https://www.reneeaudubon.com/uploads/9/5/4/2/9542466/2748307_orig.jpg) center fixed;
  background-size: 800px, 800px, auto;    
  height: 800px;
}

<div class="main-background">
  <div class="center">
    <asp:Panel ID="pnlOptions" runat="server" BackColor="#669999" HorizontalAlign="Center" Height="55px" Width="607px" BorderStyle="Double">
      <div style="vertical-align: top">
        <asp:Label ID="lblAvailableOptions" runat="server" Text="Available Options" Font-Size="X-Large" Font-Bold="True" ForeColor="Black" Font-Names="Trebuchet MS" Style="vertical-align: bottom"></asp:Label>
      </div>
    </asp:Panel>
  </div>
  <br />
  <br />
  <br />
  <asp:Panel ID="pnlButtons" runat="server" HorizontalAlign="Center">
    <asp:Button ID="btnGroupSummary" runat="server" Text="Group Summary" CssClass="btn btn-mainmenu" OnClick="btnGroupSummary_Click" BackColor="#3D5C5C" /><br />
    <br />
    <asp:Button ID="btnServices" runat="server" Text="Services" CssClass="btn btn-mainmenu" BackColor="#527A7A" /><br />
    <br />
    <asp:Button ID="btnLetters" runat="server" Text="Letters" CssClass="btn btn-mainmenu" BackColor="#94B8B8" />
  </asp:Panel>
</div>

图像是从https://www.reneeaudubon.com引用的

在asp.net中修复背景div

1 个答案: