Erstellen von Wasserzeichen mit HTML und CSS

Ein Wasserzeichen auf einer beliebigen Webseitenschnittstelle ist das transparente Logo oder Text, der auf dem Bildschirm angezeigt wird und in einer festen Position bleibt. Das Wasserzeichen bezeichnet normalerweise die Art der App oder Website oder eines Eröffnungssystems. Das Fensteröffnungssystem verfügt beispielsweise über ein Wasserzeichen in Form von Text am rechten Ende des Bildschirms, das als "dargestellt wird"Aktive Fenster”.

In diesem Artikel wird die Methode zum Erstellen eines Wasserzeichens mit HTML und CSS demonstriert.

So erstellen Sie ein Wasserzeichen mit HTML und CSS?

Ein Wasserzeichen in HTML wird unter Verwendung einer Reihe von CSS -Eigenschaften erstelltOpazität","Höhe","Breite","Farbe","Position", usw. Es kann besser verstanden werden, indem ein Beispiel hinzugefügt wird, um CSS -Eigenschaften auf ein HTML -Element anzuwenden, um ein Wasserzeichen aus einem einfachen Text zu erstellen.

Beispiel

Zunächst muss das HTML -Element hinzugefügt werden, um den Text zu definieren, der im Wasserzeichen dargestellt werden soll:

Hallo Benutzer!


Dies ist der Text im Div -Behälter.


Das Wasserzeichensymbol ist ein transparentes Symbol an der Schnittstelle, das auf der festen Position bleibt.

Im oben hinzugefügten Code -Snippet:

• A "div"Element wird mit dem" hinzugefügt "Ausweis"Als" deklariert "meine ID”.
• Im Inneren werden einige zufällige Sätze geschrieben, die den Webseiteninhalt bezeichnen.
• Danach ein anderer “divElement wird hinzugefügt, das den Text enthält, der auf dem Wasserzeichen angezeigt werden soll.

CSS -Teil

#Watermark

Position: fest;
unten: 9px;
Rechts: 9px;
Deckkraft: 0.4;
Farbe: Schwarz;
Hintergrundfarbe: RGBA (131, 50, 185, 0.5);
Höhe: 40px;
Breite: 100px;
Anzeige: Flex;
Ausrichtung: Zentrum;
Justify-Content: Center;

#meine ID

Hintergrundfarbe: Azure;
Höhe: 125px;

Im obigen CSS -Code:

• Der "Ausweis”Selektor, um die mit der“ zugeordnete Div auszuwählen “#WatermarkID wurde hinzugefügt.
• Der "PositionDie Eigenschaft im ID -Selektor ist definiert als “Fest”. Dieser Wert legt das Wasserzeichen in eine feste Position an der Schnittstelle.
• Der "Unterseite"Eigenschaft ist definiert als"9px”. Es stellt das Wasserzeichen auf die Schnittstelle so, dass es ist, dass es ist9 Pixel”Hoch vom unteren Bildschirmrand.
• Der "Rechts"Eigenschaft wird mit dem Wert hinzugefügt"9px"Um das Wasserzeichen zu setzen"9 Pixel”Von der rechten Seite des Bildschirms.
• Der "Opazität" ist definiert als "4”. Es ist die CSS -Eigenschaft, die die Transparenz des Elements definiert.
• Der "Farbe"Für den auf dem Wasserzeichen angezeigten Text wird definiert als"Schwarz”.
• Da das Wasserzeichen mit Hilfe eines “geschaffen wird“divElement, wir können auch die Hintergrundfarbe für das Wasserzeichen mit der “definieren“RGB”Funktion.

Infolgedessen wird das Wasserzeichen erstellt und unten rechts auf der Webseite platziert:

Das Wasserzeichen bewegt sich nirgendwo anders auf dem Bildschirm und bleibt an der festen Position:

Dies fasst die Methode zusammen, um ein Wasserzeichen mithilfe der HTML- und CSS -Bibliotheken zu erstellen.

Abschluss

Ein Wasserzeichen wird in HTML und CSS erstellt, indem der Wasserzeichen oder das Logo über ein HTML -Element hinzugefügt wird. Wenden Sie dann einige CSS -Eigenschaften an wie “Opazität","Höhe","Breite","Farbe","Hintergrundfarbe", Und "PositionEigenschaften, um es zu einem Wasserzeichen zu machen und es so einzustellen, dass es sich nicht von dort bewegt. Dieser Blog hat gezeigt, wie ein Wasserzeichen mit HTML und CSS erstellt wird.