如何在 HTML 中更改背景颜色？

在本文中，我们将使用 C# 示例来展示使用 Aspose.HTML for .NET 库更改 HTML 文件背景颜色的不同方法。

使用 CSS background-color 属性可轻松更改网页的背景颜色。有几种方法可以设置该属性值。您可以使用内联、内部或外部 CSS，HTML 颜色值可以指定为标准颜色名称或 HEX、RGB、RGBA、HSL 和 HSLA 值。在下面的示例中，我们将使用 HEX 和 RGB 颜色代码，因为它们是最常用的。

有关如何使用 HTML 颜色代码的更多信息，请访问 HTML 颜色代码 一文。在 背景颜色 部分，您可以找到如何更改背景颜色的 HTML 代码示例。

更改特定元素的背景颜色

要使用 Aspose.HTML API 更改 HTML 元素的背景颜色，应遵循以下几个步骤：

加载现有的 HTML 文件。
确定要为哪个元素更改背景色，然后找到该元素并为其设置样式属性。使用 Element 类中的 GetElementsByTagName(name) 方法，该方法可返回具有给定标记名的 HTML 元素。
使用 background-color 属性设置 style 属性：使用 HTMLElement 类的 Style 属性。
保存修改后的 HTML 文档。

您可以设置或更改各种 HTML 元素的背景颜色，如 <p>、<h1>…<h6>、<div> 或 <table>。下面的 C# 示例显示了第一个 <p> 元素的背景颜色更改：

C# 示例

 1// Change background color for HTML paragraph using C#
 2
 3// Prepare output path for document saving
 4string savePath = Path.Combine(OutputDir, "change-background-color-p-inline-css.html");
 5
 6// Prepare path to source HTML file
 7string documentPath = Path.Combine(DataDir, "file.html");
 8
 9// Create an instance of an HTML document
10HTMLDocument document = new HTMLDocument(documentPath);
11
12// Find the paragraph element to set a style attribute
13HTMLElement paragraph = (HTMLElement)document.GetElementsByTagName("p").First();
14
15// Set the style attribute with background-color property
16paragraph.Style.BackgroundColor = "#e5f3fd";
17
18// Save the HTML document to a file
19document.Save(Path.Combine(savePath));

Example-HowToChangeBackgroundColorForParagraph.cs hosted with ❤ by GitHub

JavaScript code

1<script>
2	// Find the paragraph element to set a style attribute
3	var paragraph = document.getElementsByTagName("p")[0];
4
5	// Set the style attribute with background-color property
6	paragraph.style.backgroundColor = "#e5f3fd";
7</script>

图中展示了使用内联 CSS 更改 HTML 文件中第一段背景颜色的结果：

文本 “渲染了 change-background-color-p-inline-css.html 文件，更改了第一段的背景颜色”

更改整个网页的背景颜色

您可以使用内联style属性或内部 CSS 更改背景颜色。

使用内联 CSS 更改背景颜色

如果要更改整个 HTML 文档的颜色，应使用<body>部分开头标签中 style属性的 background-color 属性。

C# 示例

 1// Change background color with inline CSS in C#
 2
 3// Prepare output path for document saving
 4string savePath = Path.Combine(OutputDir, "change-background-color-inline-css.html");
 5
 6// Prepare path to source HTML file
 7string documentPath = Path.Combine(DataDir, "file.html");
 8
 9// Create an instance of an HTML document
10HTMLDocument document = new HTMLDocument(documentPath);
11
12// Find the body element to set a style attribute
13HTMLElement body = (HTMLElement)document.GetElementsByTagName("body").First();
14
15// Set the style attribute with background-color property
16body.Style.BackgroundColor = "#e5f3fd";
17
18// Save the HTML document to a file
19document.Save(Path.Combine(savePath));

Example-ChangeBackgroundColorWithInlineCss.cs hosted with ❤ by GitHub

JavaScript code

1<script>
2	// Find the body element to set a style attribute
3	var body = document.getElementsByTagName("body")[0];
4
5	// Set style attribute with background-color property
6	body.style.backgroundColor = "#e5f3fd";
7</script>

You can download the complete examples and data files from GitHub.

使用内部 CSS 更改背景颜色

如以下 HTML 代码示例所示，使用内部 CSS 也可以实现相同的背景着色效果：

1<head>
2<style>
3	body {
4	background-color: rgb(229, 243, 253);
5	}
6</style>
7</head>

注意： 请记住，使用 style 属性会覆盖 HTML <style> 标记或外部样式表中设置的任何样式。

下一个 C# 示例将演示如何使用内部 CSS 更改整个 HTML 文件的背景颜色。采取以下步骤

加载现有的 HTML 文件。
找到 <body>元素，删除style属性中的background-color属性。 注意： 如果使用内联 style 属性设置背景色，则需要执行此步骤，因为使用 style 属性会覆盖内部和外部 CSS。
创建 <style> 元素，并为 <body> 元素指定 background-color 值。
找到文档中的 <head> 元素，并在其中添加 <style> 元素。
保存修改后的 HTML 文档。

C# 示例

 1// Change background color for HTML using internal CSS - C#
 2
 3// Prepare output path for document saving
 4string savePath = Path.Combine(OutputDir, "change-background-color-internal-css.html");
 5
 6// Prepare path to source HTML file
 7string documentPath = Path.Combine(DataDir, "file.html");
 8
 9// Create an instance of an HTML document
10HTMLDocument document = new HTMLDocument(documentPath);
11
12// Find the body element
13HTMLElement body = (HTMLElement)document.GetElementsByTagName("body").First();
14
15// Remove the background-color property from the style attribute
16body.Style.RemoveProperty("background-color");
17
18// Create a style element and assign the background-color value for body element
19Element style = document.CreateElement("style");
20style.TextContent = "body { background-color: rgb(229, 243, 253) }";
21
22// Find the document head element and append style element to the head
23Element head = document.GetElementsByTagName("head").First();
24head.AppendChild(style);
25
26// Save the HTML document
27document.Save(Path.Combine(savePath));

Example-ChangeBackgroundColorWithInternalCss.cs hosted with ❤ by GitHub

JavaScript code

 1<script>
 2	// Find the body element
 3	var body = document.getElementsByTagName("body")[0];
 4
 5	// Remove the background-color property from style attribute
 6	body.style.removeProperty("background-color");
 7
 8	// Create a style element and assign the background-color value for body element
 9	var style = document.createElement("style");
10	style.textContent = "body { background-color: rgb(229, 243, 253) }";
11
12	// Find the document head element and append style element to the head
13	var head = document.getElementsByTagName("head")[0];
14	head.appendChild(style);
15</script>

图中显示了更改整个文档背景色之前(a)和之后(b)的两个 HTML 文件片段：

文本 “更改背景颜色之前和之后的 HTML 文档的两个片段”。

Aspose.HTML 提供免费的 HTML 网络应用程序，是转换器、合并器、搜索引擎优化工具、HTML 代码生成器、URL 工具等的在线集合。这些应用程序可在任何装有网络浏览器的操作系统上运行，无需安装任何其他软件。它是一种快速、简便的方法，能有效解决与 HTML 相关的任务。

如何更改文字颜色如何更改边框颜色