Una técnica de superposición en CSS es una forma de transponer el texto a través de las imágenes. El CSS "imagen de fondo"Y CSS"fondo"Las propiedades se utilizan para lograr este efecto de superposición. El propósito de este artículo es explorar cómo usar CSS para establecer una imagen de superposición con color.

Los resultados de este artículo son:

• • ¿Cuál es la propiedad de imagen de fondo en CSS??
  • ¿Qué es la propiedad de fondo en CSS??
  • Cómo establecer la imagen de superposición con color?

Empecemos!

propiedad de imagen de fondo

Para agregar una imagen como fondo de cualquier elemento HTML, el "imagen de fondoSe puede utilizar la propiedad.

Sintaxis

La sintaxis de la propiedad de imagen de fondo es:

IMAGEN DE BUENGE: Imagen url ();

Especifique el nombre de la imagen o su ruta completa dentro de la url ().

¿Qué es la propiedad de fondo en CSS??

Es una propiedad abreviada utilizada para asignar diferentes valores a la imagen, como color, tamaño, posición, etc.

Sintaxis

La sintaxis de la propiedad de fondo es:

fondo: color | posición | tamaño ;

• • color: Se usa para asignar color de fondo.
  • posición: Se usa para establecer la posición de fondo.
  • tamaño: Se usa para especificar el tamaño de fondo.

Aquí hay un ejemplo para explicar el punto.

Ejemplo: cómo establecer la imagen de superposición con color?

Primero en este ejemplo, crearemos un div, llamado "cubrir"Y dentro del div, hemos agregado una mano con

etiqueta:

Superposición de imágenes

Ahora, agregaremos una imagen de fondo con la ayuda del CSS. Como "url ()", Hemos dado la ruta de la imagen y asignado el ancho"350px, altura "250px", Y posición"absoluto"De la imagen:

.imagen
Antecedentes: URL ("Imagen.jpg ") sin repetición;
Ancho: 350px;
Altura: 250px;
Posición: Absoluto;

Esto dará la siguiente salida:

Ahora, avancemos un paso más para aplicarle el efecto de superposición:

.cubrir
Antecedentes: RGBA (233, 140, 0, 0.7);
margen-top: 10px;
margen izquierda: 55px;
Ancho: 200px;
tamaño de fuente: 25px;
Color: RGB (252, 80, 0);
Posición: Absoluto;

Aquí utilizamos diferentes propiedades de CSS para servir diferentes funcionalidades:

• • fondo: Hemos asignado un color superpuesto utilizando una propiedad de fondo.
  • margen: Para especificar la posición de la superposición, use la propiedad de margen.
  • ancho: Este parámetro especifica el tamaño de la superposición que se muestra sobre la imagen de fondo.
  • tamaño de fuente: Especifica el tamaño de la fuente.
  • color: Establece el color del texto.
  • posición: Define dónde aparecerá el texto.

Después de la implementación de los puntos mencionados anteriormente, guarde el código de archivo HTML y CSS y verifique el resultado:

Hemos ofrecido el método para configurar una imagen de superposición con color en CSS.

Conclusión

El efecto de superposición se puede lograr usando CSS "imagen de fondo"Y CSS"fondo" propiedades. Se puede hacer asignando una imagen a la propiedad de imagen de fondo y configurando el color en la propiedad de fondo. Además, es una técnica para combinar más de un elemento en un solo contenedor. Esta publicación demostró cómo establecer imágenes de superposición con color en CSS usando ejemplos.