Wie man ein Bild zu HTML hinzufügt – C#-Beispiele

Würden Webseiten nur aus Text bestehen, wären sie nicht visuell ansprechend und würden die Nutzer nicht effektiv ansprechen. Bilder und andere Medienelemente verbessern das Nutzererlebnis, indem sie den Inhalt ansprechender, interaktiver und leichter verständlich machen.

In diesem Artikel werden wir anhand von C#-Beispielen verschiedene Möglichkeiten aufzeigen, wie man mit der Aspose.HTML for .NET-Bibliothek ein Bild in HTML einfügt.

Grundlegende Informationen mit HTML-Beispielen zum Einfügen von Bildern in HTML mit dem <img>-Tag, CSS-Hintergründen, JavaScript und Base64-Kodierung finden Sie im Artikel Bilder in HTML einfügen – Von der einfachen Syntax bis zu fortgeschrittenen Techniken.

Bild zu HTML hinzufügen

Mit der Klasse HTMLDocument können Sie ein <img>-Element erstellen, Attribute wie src, alt, width und height setzen und es dem HTML-Dokument hinzufügen, indem Sie es an der gewünschten Stelle platzieren.

Bild zu einem leeren HTML-Dokument hinzufügen

Wenn Sie HTML von Grund auf neu erstellen und ein Bild hinzufügen möchten, sollten Sie einige Schritte befolgen:

Erstellen Sie eine Instanz der Klasse HTMLDocument.
Rufen Sie das Element <body> mit der Methode GetElementsByTagName() ab.
Erstellen Sie ein <img> Element mit der CreateElement() Methode.
Setzen Sie Bildattribute mit der Methode SetAttribute().
Verwenden Sie die AppendChild() Methode um das <img> Element in den Body des Dokuments einzufügen.
Speichern Sie das geänderte Dokument mit der Methode Save() in einem bestimmten Ausgabeverzeichnis.

 1// Add image to HTML using C#
 2
 3// Create a new HTML document
 4using (HTMLDocument document = new HTMLDocument())
 5{
 6    // Get a reference to the <body> element
 7    HTMLElement body = (HTMLElement)document.GetElementsByTagName("body").First();
 8
 9    // Create an <img> element
10    var img = document.CreateElement("img");
11    img.SetAttribute("src", "https://docs.aspose.com/html/images/aspose-html-for-net.png"); // Specify a link URL or local path
12    img.SetAttribute("alt", "Aspose.HTML for .NET Product Logo");
13    img.SetAttribute("width", "128"); // Set parameters optionally
14    img.SetAttribute("height", "128");
15
16    // Add the <img> element to the <body>
17    body.AppendChild(img);
18
19    // Save file to a local file system
20    document.Save(Path.Combine(OutputDir, "add-image.html"), new HTMLSaveOptions());
21}

Example-AddImageToHTML.cs hosted with ❤ by GitHub

Bild zu bestehendem HTML hinzufügen

Sie können ein Bild einfügen, indem Sie es an der gewünschten Stelle im HTML-Code platzieren. Das folgende C#-Beispiel zeigt, wie Sie das Bild nach dem zweiten <p>-Element einfügen:

Öffnen Sie eine bestehende HTML-Datei mit Hilfe der Klasse HTMLDocument.
Verwenden Sie die Methode GetElementsByTagName("p"), um alle <p>-Elemente im HTML-Dokument zu sammeln und sie in einer HTMLCollection zu speichern.
Stellen Sie sicher, dass mindestens zwei Absätze vorhanden sind, bevor Sie mit den Änderungen fortfahren. Die if-Anweisung stellt sicher, dass das Dokument mindestens zwei Absatzelemente enthält, indem sie überprüft, ob paragraphs.Length >= 2 ist.
Verwenden Sie die Methode CreateElement("img"), um ein neues <img>-Element zu erzeugen und setzen Sie seine Attribute src, alt, width und height.
Holen Sie das zweite <p>-Element (paragraphs[1]) aus der Sammlung. Da Sammlungen in C# nullbasierte Indizierung verwenden, bezieht sich paragraphs[1] auf das zweite <p>-Element im Dokument.
Verwenden Sie die Funktion InsertBefore(img, secondParagraph.NextSibling), um das neu erstellte Bild direkt nach dem zweiten Absatz zu platzieren.
Speichern Sie das geänderte Dokument mit der Methode Save() in einem bestimmten Ausgabeverzeichnis.

 1// Add image to existing HTML using C#
 2
 3// Load an existing HTML document
 4using (HTMLDocument document = new HTMLDocument(Path.Combine(DataDir, "file.html")))
 5{
 6    // Get all <p> (paragraph) elements
 7    HTMLCollection paragraphs = document.GetElementsByTagName("p");
 8
 9    // Check if there are at least two paragraphs
10    if (paragraphs.Length >= 2)
11    {
12        // Create a new <img> element
13        var img = document.CreateElement("img");
14        img.SetAttribute("src", "https://docs.aspose.com/html/images/aspose-html-for-net.png"); // Set image source (URL or local path)
15        img.SetAttribute("alt", "Aspose.HTML for .NET Product Logo");
16        img.SetAttribute("width", "128");
17        img.SetAttribute("height", "128");
18
19        // Get the second paragraph
20        Element secondParagraph = paragraphs[1];
21
22        // Insert the image after the second paragraph
23        secondParagraph.ParentNode.InsertBefore(img, secondParagraph.NextSibling);
24    }
25
26    // Save the updated HTML document
27    document.Save(Path.Combine(OutputDir, "add-image-after-paragraph.html"), new HTMLSaveOptions());
28}

Example-AddImageToExistingHTML.cs hosted with ❤ by GitHub

Dieser C#-Code lädt eine bestehende HTML-Datei, ruft alle <p>-Elemente ab und prüft, ob mindestens zwei vorhanden sind. Ist dies der Fall, wird ein neues <img>-Element erstellt, dessen Attribute src, alt, width und height gesetzt und dieses Bild nach dem zweiten Absatz eingefügt.

HTML-Hintergrundbilder

Das Einfügen eines Bildes als Hintergrund in HTML ist mit der CSS-Eigenschaft background-image einfach. Es gibt mehrere Möglichkeiten, den Wert dieser Eigenschaft festzulegen. Sie können Inline-, internes oder externes CSS verwenden, und die Bilder können im PNG-, JPG-, GIF- oder WebP-Format vorliegen.

Hintergrundbild mit internem CSS hinzufügen

Wenn Sie der gesamten Webseite ein Hintergrundbild hinzufügen möchten, können Sie die CSS-Eigenschaft background-image für das Element <body> innerhalb des Elements <style> festlegen. Standardmäßig wird ein Hintergrundbild wiederholt, wenn es kleiner ist als das angegebene Element, in diesem Fall das Element <body>:

1<head>
2    <style>
3        body {
4			background-image: url("background.png");
5		}
6    </style>
7</head>

Mit dem folgenden C#-Code können Sie ein Hintergrundbild für die gesamte Seite mit internem CSS hinzufügen. Er erstellt ein <style>-Element im <head> des Dokuments mit einer CSS-Regel, die ein Hintergrundbild für den <body> festlegt:

Benutze die HTMLDocument Klasse, um ein bestehendes HTML aus dem angegebenen Verzeichnis zu laden.
Rufen Sie die Methode CreateElement() auf, um ein <style> für internes CSS zu erstellen.
Verwenden Sie die Methode CreateTextNode(), um eine CSS-Regel zu erstellen, die das Hintergrundbild festlegt.
Verwenden Sie die Methode AppendChild(), um das CSS als Text innerhalb des <style>-Elements einzufügen.
Verwenden Sie die Methode QuerySelector(), um das Element <head> zu finden. Falls es fehlt, rufen Sie CreateElement() auf, um ein neues <head> zu erzeugen und es vor <body> einzufügen.
Rufen Sie die Methode AppendChild() auf, um das Element <style> innerhalb von <head> einzufügen.
Speichern des geänderten Dokuments in einem angegebenen Ausgabeverzeichnis mit der Methode Save().

 1// Add a background image to HTML using C#
 2
 3// Load an existing HTML document
 4using (HTMLDocument document = new HTMLDocument(Path.Combine(DataDir, "document.html")))
 5{
 6    // Create a new <style> element
 7    HTMLStyleElement styleElement = (HTMLStyleElement)document.CreateElement("style");
 8
 9    // Define CSS for background image
10    string css = "body { background-image: url('background.png'); }";
11    styleElement.AppendChild(document.CreateTextNode(css));
12
13    // Get the <head> element or create one if missing
14    HTMLElement head = document.QuerySelector("head") as HTMLElement;
15    if (head == null)
16    {
17        head = document.CreateElement("head") as HTMLElement;
18        document.DocumentElement.InsertBefore(head, document.Body);
19    }
20
21    // Append the <style> element to the <head>
22    head.AppendChild(styleElement);
23
24    // Save the updated HTML document
25    document.Save(Path.Combine(OutputDir, "add-background-image-to-entire-page.html"));
26}

Example-AddBackgroundImageToHTML.cs hosted with ❤ by GitHub

Die Abbildung zeigt ein Fragment der Webseite mit einem Hintergrundbild für die gesamte Seite. Das Bild wird wiederholt, um den gesamten Bildschirm zu füllen:

Text “Text “Hello, World!” auf einem sich wiederholenden weichen blauen Hintergrund mit einem Wasserspritzer, der einen kreisförmigen Welleneffekt erzeugt.”

Hinweis: Bei der Verwendung der Eigenschaft background-image wird das Hintergrundbild standardmäßig wiederholt, wenn es kleiner ist als der Container des angegebenen Elements, in diesem Fall das Element <body>. Sie können die Positionierung eines Hintergrundbildes steuern und seine Skalierung mit verschiedenen CSS-Eigenschaften anpassen:

background-position gibt die Ausgangsposition des Hintergrundbildes an (z.B. center, top left, 50% 50%).
background-size legt die Größe des Hintergrundbildes fest, wobei Werte wie cover, contain oder bestimmte Abmessungen (z.B. 100px 200px) möglich sind.
background-repeat bestimmt, ob das Hintergrundbild wiederholt wird (z.B. repeat, no-repeat, repeat-x, repeat-y).

Diese Eigenschaften tragen dazu bei, dass das Hintergrundbild in verschiedenen Bildschirmgrößen und Layouts korrekt angezeigt wird.

Hintergrundbild zu HTML-Element hinzufügen

Betrachten wir den Fall, dass ein Hintergrundbild für ein separates HTML-Element hinzugefügt werden soll, zum Beispiel für das Element h1. Um zu verhindern, dass sich das Hintergrundbild wiederholt, geben wir die Eigenschaft background-repeat an.

 1// Apply background image to heading <h1> with C# and CSS
 2
 3// Load the existing HTML document
 4using (HTMLDocument document = new HTMLDocument(Path.Combine(DataDir, "document-with-h1.html")))
 5{
 6    // Create a new <style> element
 7    HTMLStyleElement styleElement = (HTMLStyleElement)document.CreateElement("style");
 8
 9    // Define CSS to apply a background image to all <p> elements
10    string css = "h1 { background-image: url('background.png'); background-repeat: no-repeat; padding: 60px;}";
11    styleElement.AppendChild(document.CreateTextNode(css));
12
13    // Get the <head> element or create one if missing
14    HTMLElement head = document.QuerySelector("head") as HTMLElement;
15    if (head == null)
16    {
17        head = document.CreateElement("head") as HTMLElement;
18        document.DocumentElement.InsertBefore(head, document.Body);
19    }
20
21    // Append the <style> element to the <head>
22    head.AppendChild(styleElement);
23
24    // Save the updated HTML document
25    document.Save(Path.Combine(OutputDir, "add-background-image-to-h1.html"));
26}

Example-AddBackgroundImageToH1Element.cs hosted with ❤ by GitHub

Die Abbildung zeigt ein Fragment der Webseite – HTML-Datei mit Hintergrundbild für das Element <h1>:

Text “Text “Have a nice day!” auf einem sanften blauen Hintergrund mit einem Wasserspritzer, der einen kreisförmigen Plätschereffekt erzeugt.”

Hintergrundbild mit Inline-CSS hinzufügen

Im Folgenden wird gezeigt, wie man ein Hintergrundbild zu einem <body>-Element mit Hilfe von Inline-CSS hinzufügt – das Attribut style mit der CSS-Eigenschaft background-image innerhalb des <body>-Elements:

1<body style="background-image: url('flower.png');"> Content of the document body </body>

 1// Add background image with CSS in C#
 2
 3// Load an existing HTML document
 4using (HTMLDocument document = new HTMLDocument(Path.Combine(DataDir, "document.html")))
 5{
 6    // Get the <body> element
 7    HTMLElement body = document.QuerySelector("body") as HTMLElement;
 8
 9    if (body != null)
10    {
11        // Set a background image using inline CSS
12        body.SetAttribute("style", "background-image: url('flower.png');");
13    }
14
15    // Save the updated HTML document
16    document.Save(Path.Combine(OutputDir, "add-background-image.html"));
17}

Example-AddBackgroundImageToHTMLUsingInlineCss.cs hosted with ❤ by GitHub

Zusammenfassung und Empfehlungen

Das Hinzufügen von Bildern mit Hilfe des <img>-Tags oder von Hintergrundbildern über CSS wertet Webinhalte visuell und strukturell auf. Wählen Sie die geeignete Methode, je nachdem, ob das Bild dekorativ oder wesentlich für den Inhalt ist.
Die Klasse HTMLDocument bietet Flexibilität für die dynamische Bearbeitung von HTML-Inhalten. Prüfen Sie immer, ob die erforderlichen Elemente (head, body, p, usw.) vorhanden sind, bevor Sie sie ändern, z.B. durch Hinzufügen von CSS-Eigenschaften.
Die Verwendung von internem CSS (das <style>-Element) ist ein strukturierter Ansatz zur Einstellung von Hintergrundbildern, der den HTML-Code sauberer und die Stile zentraler hält. Inline-CSS (das Attribut style) ist eine Alternative für einfache Fälle.
Verwenden Sie CSS-Eigenschaften wie background-size, background-repeat und background-position, um sicherzustellen, dass sich Bilder gut an verschiedene Bildschirmgrößen anpassen.

Siehe auch

In dem Artikel Bilder in HTML einfügen – Von der einfachen Syntax bis zu fortgeschrittenen Techniken lernen Sie verschiedene Methoden zum Einfügen von Bildern kennen, darunter die Verwendung des <img>-Tags, CSS-Hintergrundbilder, JavaScript und Base64-Kodierung.

Der Artikel HTML-Dokument bearbeiten gibt Ihnen grundlegende Informationen darüber, wie Sie das Document Object Model (DOM) lesen oder ändern können. Sie erfahren, wie Sie ein HTML-Element erstellen und wie Sie mit Aspose.HTML for .NET damit arbeiten können.

Aspose.HTML bietet kostenlose HTML-Webanwendungen, die eine Online-Sammlung von Konvertern, Mergern, SEO-Tools, HTML-Code-Generatoren, URL-Tools und mehr sind. 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.

Wie kann man die Farbe des Rahmens ändern? Verwendung des CSS-Selektors