Wie kann man die Hintergrundfarbe in HTML ändern?
In diesem Artikel werden wir C#-Beispiele verwenden, um verschiedene Möglichkeiten zum Ändern der Hintergrundfarbe in HTML-Dateien mit Aspose.HTML for .NET-Bibliothek zu zeigen.
Die Hintergrundfarbe auf einer Webseite zu ändern ist einfach mit der CSS Eigenschaft background-color. Es gibt mehrere Möglichkeiten, den Wert dieser Eigenschaft festzulegen. Sie können Inline-, internes oder externes CSS verwenden, und HTML-Farbwerte können als Standardfarbnamen oder mit HEX-, RGB-, RGBA-, HSL- und HSLA-Werten angegeben werden. In den folgenden Beispielen werden wir HEX- und RGB-Farbcodes verwenden, da sie am häufigsten verwendet werden.
Weitere Informationen über die Verwendung von HTML-Farbcodes finden Sie in dem Artikel HTML-Farbcodes. Im Abschnitt Hintergrundfarbe finden Sie HTML-Code-Beispiele, wie Sie die Hintergrundfarbe ändern können.
Hintergrundfarbe eines bestimmten Elements ändern
Um die Hintergrundfarbe für ein HTML-Element mit Hilfe der Aspose.HTML API zu ändern, sollten Sie ein paar Schritte befolgen:
- Laden Sie eine bestehende HTML-Datei.
- Bestimmen Sie das Element, für das Sie die Hintergrundfarbe ändern möchten, und suchen Sie dieses Element, um ein Style-Attribut für es zu setzen. Verwenden Sie die Methode
GetElementsByTagName(
name) der Klasse Element, die HTML-Elemente mit einem bestimmten Tag-Namen zurückgibt. - Setzen Sie das
style-Attribut mit der Eigenschaftbackground-color: Verwenden Sie die Style Eigenschaft der HTMLElement Klasse. - Speichern Sie das geänderte HTML-Dokument.
Sie können die Hintergrundfarbe für verschiedene HTML-Elemente wie <p>, <h1>…<h6>, <div> oder <table> einstellen oder ändern. Das folgende C#-Beispiel zeigt die Änderung der Hintergrundfarbe für das erste <p>-Element:
C#-Beispiel
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));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>Die Abbildung veranschaulicht die Ergebnisse der Änderung der Hintergrundfarbe für den ersten Absatz in der HTML-Datei mit Inline-CSS:
Hintergrundfarbe für die gesamte Webseite ändern
Sie können die Hintergrundfarbe mit dem Inline-Attribut style oder mit internem CSS ändern.
Hintergrundfarbe mit Inline-CSS ändern
Wenn Sie die Farbe des gesamten HTML-Dokuments ändern wollen, sollten Sie die Eigenschaft background-color des Attributs style im öffnenden Tag des Abschnitts <body> verwenden.
C# Beispiel
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));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>Hintergrundfarbe mit internem CSS ändern
Das gleiche Ergebnis bei der Einfärbung des Hintergrunds kann mit internem CSS erzielt werden, wie das folgende HTML-Codebeispiel zeigt:
1<head>
2<style>
3 body {
4 background-color: rgb(229, 243, 253);
5 }
6</style>
7</head>Hinweis: Beachten Sie, dass die Verwendung eines style-Attributs jeden im HTML-Tag <style> oder in einem externen Stylesheet festgelegten Stil außer Kraft setzt.
Das nächste C#-Beispiel zeigt, wie man internes CSS einsetzt, um die Hintergrundfarbe für eine ganze HTML-Datei zu ändern. Gehen Sie ein paar Schritte:
- Laden Sie eine bestehende HTML-Datei.
- Suchen Sie das Element
<body>und entfernen Sie die Eigenschaftbackground-coloraus dem Attributstyle. Hinweis: Wenn die Hintergrundfarbe mit dem Inline-Attributstylefestgelegt wurde, ist dieser Schritt erforderlich, da das Attributstylesowohl internes als auch externes CSS außer Kraft setzt. - Erstellen Sie ein
<style>-Element und weisen Sie den Wertbackground-colorfür das<body>-Element zu. - Suchen Sie das
<head>-Element in Ihrem Dokument und fügen Sie das<style>-Element darin ein. - Speichern Sie das geänderte HTML-Dokument.
C# Beispiel
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));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>Die Abbildung zeigt zwei Fragmente der HTML-Datei vor (a) und nach (b) der Änderung der Hintergrundfarbe für das gesamte Dokument:
Aspose.HTML bietet kostenlose HTML-Webanwendungen, bei denen es sich um eine Online-Sammlung von Konvertern, Zusammenführungen, SEO-Tools, HTML-Code-Generatoren, URL-Tools und mehr handelt. Die Anwendungen funktionieren auf jedem Betriebssystem mit einem Webbrowser und erfordern keine zusätzliche Softwareinstallation. Es ist eine schnelle und einfache Möglichkeit, Ihre HTML-bezogenen Aufgaben effizient und effektiv zu lösen.
