Tworzenie znaku wodnego za pomocą HTML i CSS

Znakiem wodnym na dowolnym interfejsie strony internetowej to przezroczyste logo lub tekst, który pojawia się na ekranie i pozostaje w ustalonej pozycji. Znak wodny zwykle oznacza charakter aplikacji lub strony internetowej lub dowolny system otwierający. Na przykład system otwierania systemu Windows ma znak wodny w postaci tekstu na prawym dole ekranu przedstawionego jako „Aktywne okna".

W tym artykule pokazuje metodę utworzenia znaku wodnego za pomocą HTML i CSS.

Jak stworzyć znak wodny za pomocą HTML i CSS?

Znak wodny w HTML jest tworzony przy użyciu zestawu właściwości CSS, takich jak „nieprzezroczystość”,„wysokość”,„szerokość”,„kolor”,„pozycja”Itd. Można to lepiej zrozumieć, dodając przykład, aby zastosować właściwości CSS na element HTML, aby utworzyć znak wodny z prostego tekstu.

Przykład

Po pierwsze, konieczne jest dodanie elementu HTML, aby zdefiniować tekst, który ma być reprezentowany na znak wodnym:

Witaj użytkownik!


To jest tekst wewnątrz kontenera Div.


Symbol znaku wodnego jest przezroczystym symbolem na interfejsie, który pozostaje w ustalonej pozycji.

W kodzie snappet dodany powyżej:

• A "div”Element jest dodawany z„ID”Zadeklarowane jako„mój dokument tożsamości".
• Wewnątrz napisano niektóre losowe zdania, które oznaczają treść strony internetowej.
• Potem kolejny „div”Dodano element, który zawiera tekst, który ma być wyświetlany na znaku wodnym.

Część CSS

#znak wodny

Pozycja: Naprawiono;
Dół: 9px;
Racja: 9px;
Krycie: 0.4;
czarny kolor;
kolor tła: RGBA (131, 50, 185, 0.5);
Wysokość: 40px;
szerokość: 100px;
Wyświetlacz: Flex;
Wyrównanie: Center;
Justify-Content: Center;

#mój dokument tożsamości

kolor tła: Azure;
Wysokość: 125px;

W powyższym kodzie CSS:

• „„ID„Selektor, aby wybrać div powiązany z„#znak wodny„Dodano identyfikator.
• „„pozycja„Właściwość wewnątrz selektora identyfikatora jest zdefiniowana jako„naprawił". Ta wartość umieszcza znak wodny w ustalonej pozycji na interfejsie.
• „„spód„Własność jest zdefiniowana jako„9px". Umieszcza znak wodny na interfejsie w taki sposób, że jest „9 pikseli„Wysokie od dołu ekranu.
• „„Prawidłowy„Własność jest dodawana o wartości”9px„Aby ustawić znak wodny”9 pikseli”Z prawej strony ekranu.
• „„nieprzezroczystość”Jest zdefiniowane jako„4". Jest to właściwość CSS, która określa przezroczystość elementu.
• „„kolor”Dla tekstu wyświetlanego na znaku wodnym jest zdefiniowane jako„czarny".
• Ponieważ znak wodny powstaje za pomocą „div„Element, możemy również zdefiniować kolor tła dla znaku wodnego za pomocą„RGB”Funkcja.

W rezultacie znak wodny zostanie utworzony i umieszczony w prawej dolnej stronie strony internetowej:

Znak wodny nie porusza się nigdzie indziej na ekranie i pozostanie w ustalonej pozycji:

To podsumowuje metodę utworzenia znaku wodnego za pomocą bibliotek HTML i CSS.

Wniosek

Znak wodny jest tworzony w HTML i CSS, dodając tekst lub logo znaku wodnego za pomocą elementu HTML. Następnie zastosuj niektóre właściwości CSS, takie jak „nieprzezroczystość”,„wysokość”,„szerokość”,„kolor”,„kolor tła", I "pozycja„Właściwości, aby uczynić go znakiem wodnym i ustawić go w taki sposób, że nie poruszał się stamtąd. Ten blog pokazał, jak stworzyć znak wodny za pomocą HTML i CSS.