Creación de marcas de agua usando HTML y CSS

Una marca de agua en cualquier interfaz de la página web es el logotipo o texto transparente que aparece en la pantalla y permanece en una posición fija. La marca de agua normalmente denota la naturaleza de la aplicación o sitio web o cualquier sistema de apertura. Por ejemplo, el sistema de apertura de Windows tiene una marca de agua en forma de texto en la parte inferior derecha de la pantalla representada como "Windows activo".

Este artículo demostrará el método para crear una marca de agua utilizando HTML y CSS.

Cómo crear una marca de agua usando HTML y CSS?

Se crea una marca de agua en HTML utilizando un conjunto de propiedades CSS como "opacidad","altura","ancho","color","posición", etc. Se puede entender mejor agregando un ejemplo para aplicar propiedades CSS en un elemento HTML para crear una marca de agua a partir de un texto simple.

Ejemplo

En primer lugar, se requiere agregar el elemento HTML para definir el texto que se supone que se representa en la marca de agua:

Hola usuario!


Este es el texto dentro del contenedor Div.


El símbolo de la marca de agua es un símbolo transparente en la interfaz que permanece en la posición fija.

En el fragmento de código agregado arriba:

• A "div"El elemento se agrega con el"identificación"Declarado como"mi identificación".
• Dentro de él, se escriben algunas oraciones aleatorias que denotan el contenido de la página web.
• Después de eso, otro "divSe agrega un elemento que contiene el texto que se supone que se muestra en la marca de agua.

Parte de CSS

#filigrana

Posición: fijo;
Abajo: 9px;
Derecha: 9px;
Opacidad: 0.4;
de color negro;
Color de fondo: RGBA (131, 50, 185, 0.5);
Altura: 40px;
Ancho: 100px;
Pantalla: Flex;
Alineación de ítems: Centro;
Justify-Content: Center;

#mi identificación

Color de fondo: Azure;
Altura: 125px;

En el código CSS anterior:

• El "identificación"Selector para seleccionar el DIV asociado con el"#filigrana"La identificación ha sido agregada.
• El "posición"La propiedad dentro del selector de ID se define como"fijado". Este valor coloca la marca de agua en una posición fija en la interfaz.
• El "abajo"La propiedad se define como"9px". Coloca la marca de agua en la interfaz de tal manera que sea "9 píxeles"Alto desde la parte inferior de la pantalla.
• El "bien"La propiedad se agrega con el valor"9px"Para establecer la marca de agua"9 píxeles"Desde el lado derecho de la pantalla.
• El "opacidad" Se define como "4". Es la propiedad CSS la que define la transparencia del elemento.
• El "color"Para el texto que se muestra en la marca de agua se define como"negro".
• Dado que la marca de agua se crea con la ayuda de un "div"Elemento también podemos definir el color de fondo para la marca de agua utilizando el"RGB" función.

Como resultado, la marca de agua se creará y se colocará en el lado inferior derecho de la página web:

La marca de agua no se moverá en ningún otro lado de la pantalla y permanecerá en la posición fija:

Esto resume el método para crear una marca de agua utilizando las bibliotecas HTML y CSS.

Conclusión

Se crea una marca de agua en HTML y CSS agregando el texto o el logotipo de la marca de agua a través de un elemento HTML. Luego, aplique algunas propiedades CSS como "opacidad","altura","ancho","color","color de fondo", y "posición"Propiedades para convertirlo en una marca de agua y establecerla de tal manera que no se mueva desde allí. Este blog ha demostrado cómo crear una marca de agua usando HTML y CSS.