使用母版页时在网页上设置背景图片

Posted 2023-03-05

【中文标题】使用母版页时在网页上设置背景图片

【英文标题】：Set background picture on webpage when using a masterpage

【发布时间】：2010-11-23 12:13:57

【问题描述】：

当网页基于母版页时，是否可以在网页上设置背景图像。注意它不是我要更改的母版页的背景，而是使用母版页的页面的背景。

【参考方案1】：

您可以为 body 或实际 ASPX 页面上的任何内容添加样式规则。它将覆盖在母版页级别设置的任何样式。

编辑：示例：

<%@ Page Title="Example" Language="C#" MasterPageFile="~/MasterPages/Main.master" 
    AutoEventWireup="true" CodeBehind="TroubleShootScanning.aspx.cs" 
    Inherits="SpectrumTechnologies.TroubleShootingScanning" %>

<asp:Content ID="Content1" ContentPlaceHolderID="mainContent" runat="server">
    <style type='text/css'>
        body  background-image: url(images/bgimage.jpg); 
    </style>
    <!-- the rest of the page here -->
</asp:Content>

这将覆盖样式表中设置的任何值。

【讨论】：

你能给我一个关于如何使用样式规则的例子

【参考方案2】：

您可以在页眉内的母版页上放置一个内容占位符。

然后在您的内容页面中，放置一个内容控件，您可以在其中直接包含第二个修改后的 CSS 样式表或 STYLE 块。

【讨论】：

我应该声明，我不能忍受 CSS 随机散布在整个文档中或直接附加到元素上。

【参考方案3】：

还有一个额外的技巧可以添加到这个......（下面的第二行） 还有助于在本地测试时显示背景。

【参考方案4】：

我建议在母版页的标题中添加一个<asp:ContentPlaceHolder ID="ExtraStyles" runat="server" /> 标记。这样您就可以将以下内容添加到您的页面：

<asp:Content ID="ExtraStylesContent" ContentPLaceHolderId="ExtraStyles" runat="server">
  <style type="text/css">
  body background-image:url('someotherimage.jpg');
  </style>
</asp:Content>

通过添加额外的 ContentPlaceHolder，您不会得到分散的样式标签，它们最终会出现在呈现的 html 的头部标签中。

【讨论】：

这是我一直这样做的方式，也可以使用它来添加页面特定的 JS 文件，以及 metatags（即我在产品页面上，我想更改默认的 meta 标签关键字 /描述）