Opprette vannmerke ved hjelp av HTML og CSS

Et vannmerke på et hvilket. Vannmerket betegner normalt arten av appen eller nettstedet eller et åpningssystem. For eksempel har Windows -åpningssystemet et vannmerke i form av tekst til høyre på skjermen representert som "Aktive vinduer”.

Denne artikkelen vil demonstrere metoden for å lage et vannmerke ved hjelp av HTML og CSS.

Hvordan lage et vannmerke ved hjelp av HTML og CSS?

Et vannmerke i HTML opprettes ved hjelp av et sett med CSS -egenskaper som “Opacitet”,“høyde”,“bredde”,“farge”,“posisjon", etc. Det kan forstås bedre ved å legge til et eksempel for å bruke CSS -egenskaper på et HTML -element for å lage et vannmerke fra en enkel tekst.

Eksempel

For det første er det påkrevd å legge til HTML -elementet for å definere teksten som antas å være representert i vannmerket:

Hei bruker!


Dette er teksten i Div Container.


Vannmerkesymbolet er et gjennomsiktig symbol på grensesnittet som holder seg på fast stilling.

I kodebiten lagt til ovenfor:

• En "div”Element er lagt til med“id”Erklært som“myid”.
• Inne i den er det skrevet noen tilfeldige setninger som betegner innholdet i websiden.
• Etter det, en annen “div”Element er lagt til som inneholder teksten som antas å vises på vannmerket.

CSS -del

#Watermark

Posisjon: Fast;
Bunn: 9px;
Til høyre: 9px;
Opacitet: 0.4;
farge svart;
Bakgrunnsfarge: RGBA (131, 50, 185, 0.5);
Høyde: 40px;
Bredde: 100px;
Display: Flex;
Align-elementer: sentrum;
Justify-Content: Center;

#myid

Bakgrunnsfarge: Azure;
Høyde: 125px;

I ovennevnte CSS -kode:

• “id”Valg for å velge DIV tilknyttet“#Watermark”ID er lagt til.
• “posisjon”Eiendom inne i ID -velgeren er definert som“fikset”. Denne verdien plasserer vannmerket i en fast stilling på grensesnittet.
• “bunn”Eiendom er definert som“9px”. Det plasserer vannmerket på grensesnittet på en slik måte at det er “9 piksler”Høyt fra bunnen av skjermen.
• “Ikke sant”Eiendom er lagt til med verdien”9px”For å sette vannmerket”9 piksler”Fra høyre side av skjermen.
• “Opacitet”Er definert som“4”. Det er CSS -egenskapen som definerer elementets gjennomsiktighet.
• “farge”For teksten som vises på vannmerket er definert som“svart”.
• Siden vannmerket er opprettet ved hjelp av en "div”Element, vi kan også definere bakgrunnsfargen for vannmerket ved å bruke“RGB”Funksjon.

Som et resultat vil vannmerket bli opprettet og plassert nederst til høyre på websiden:

Vannmerket vil ikke bevege seg noe annet sted på skjermen og vil holde seg i fast stilling:

Dette oppsummerer metoden for å lage et vannmerke ved hjelp av HTML- og CSS -bibliotekene.

Konklusjon

Et vannmerke opprettes i HTML og CSS ved å legge til vannmerketeksten eller logoen gjennom et HTML -element. Bruk deretter noen CSS -egenskaper som “Opacitet”,“høyde”,“bredde”,“farge”,“bakgrunnsfarge”, Og“posisjon”Egenskaper til det for å gjøre det til et vannmerke og sette det på en slik måte at det ikke beveger seg derfra. Denne bloggen har demonstrert hvordan du lager et vannmerke ved hjelp av HTML og CSS.