Imagen superpuesta con color en CSS

1. Use la función rgba() para superponer la imagen de fondo con color en CSS
2. Use la función linear-gradient para superponer la imagen de fondo con degradado en CSS
3. Use la propiedad background-blend-mode para superponer la imagen de fondo con degradado en CSS

Este artículo presentará algunos métodos para superponer una imagen con color en CSS.

Use la función rgba() para superponer la imagen de fondo con color en CSS

Podemos usar la función rgba() para crear una superposición de color sobre una imagen. Podemos usar la función como el valor de la propiedad background.

La sintaxis de la función rgba() se ve así.

rgba(red, green, blue, opacity);

Aquí, el color rojo, verde y azul se establece en un valor entre 0-255 y una opacidad que oscila entre 0-1. Si el valor de opacidad se establece en 0, entonces es completamente transparente, y si el valor de opacidad se establece en 1, será completamente opaco.

Podemos crear una superposición simplemente agregando un color sobre una imagen, disminuyendo su opacidad.

Por ejemplo, cree una etiqueta div y asígnele una identificación main. Luego, crea un div dentro del encabezado y dale una clase overlay.

A continuación, crea un párrafo p y escribe un texto. En CSS, establece la imagen de fondo para el id main de forma que, background: url("") no-repeat fixed.

La propiedad background-repeat es no-repeat, y la propiedad background-position es fixed. A continuación, dale al div la altura de 100% para ajustar su altura según el contenido.

Establece la propiedad overflow como hidden para ocultar el contenido que rebosa del contenedor. Además, establece el color como blanco para que el texto sea más visible.

Por último, establece la propiedad position como absolute.

A continuación, debemos crear una superposición diseñando el div overplay. Dale un color de fondo junto con la opacidad tal que background: rgba(50, 70, 80, 0.7);.

Establece la propiedad height al 100% para que coincida con la altura de su elemento padre. Establece la propiedad overflow de div a hidden como en el caso anterior.

El ejemplo siguiente muestra que el div con el nombre de clase overlay aparece sobre el div main. Como el div tiene un color de fondo transparente, la imagen de fondo es visible.

Código de ejemplo:

<div id="main">
 <div class="overlay">
 <p>
 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
 </p>
 </div>
</div>

#main {
 background: url("/img/DelftStack/logo.png") no-repeat fixed;
 height: 100%;
 overflow: hidden;
 color: #FFFFFF;
 position: absolute;
}

.overlay {
 background: rgba(50, 70, 80, 0.7);
 overflow: hidden;
 height: 100%;
}

Use la función linear-gradient para superponer la imagen de fondo con degradado en CSS

Un degradado lineal es una función CSS que crea una imagen colorida de una transición progresiva entre dos o más colores a lo largo de una línea recta. Se mezclan diferentes colores y diferentes direcciones para crear un patrón colorido.

Podemos usar linear-gradient como color de fondo, y también se puede usar como una superposición de imagen. Sin embargo, para usarlo como superposición de imágenes, debemos usarlo con la imagen de fondo.

Los colores con menor opacidad deben ser linear-gradient para hacer visible la imagen de fondo.

El primer parámetro de la función linear-gradient es la dirección del gradiente. Después, podemos especificar las paradas de color según nuestras necesidades.

Por ejemplo, cree un div con un id main. Seleccione la identificación en CS y configure la altura y el ancho del contenedor como 100vh y 100%.

Luego configure el degradado lineal y la imagen de fondo usando la propiedad abreviada background. Escribe la propiedad de gradiente lineal y usa la dirección hacia la derecha como primer parámetro.

A continuación, utilice la función rgba() para especificar el degradado. Escriba rgba(50, 70, 80, 0.7) como la primera parada de color y agregue rgba(30, 20, 150, 0.7) como la segunda parada de color.

Después de la función linear-gradient, use la url() para insertar la imagen y las opciones no-repeat y fixed para la imagen de fondo.

Aquí, hemos utilizado dos colores en linear-gradient con una opacidad de 0.7 en cada color. El valor a la derecha dentro del gradiente lineal indica el patrón o la dirección del color.

Significa que el lado izquierdo del contenedor contiene el color rgba(50, 70, 80, 0.7), y gradualmente el color cambia a rgba(30, 20, 150, 0.7) mientras se mueve hacia la derecha.

El siguiente ejemplo muestra que el gradiente lineal proporciona una superposición de imagen, que incluye dos colores diferentes que se mueven de izquierda a derecha debido a la transparencia del color utilizado en gradiente lineal.

Código de ejemplo:

<div id="main">
</div>

#main {
 height: 100vh;
 width: 100%;
 background: linear-gradient(to right, rgba(50, 70, 80, 0.7), rgba(30, 20, 150, 0.7)), url("/img/DelftStack/logo.png") no-repeat fixed;
}

Use la propiedad background-blend-mode para superponer la imagen de fondo con degradado en CSS

La propiedad background-blend-mode establece cómo las imágenes de fondo de un elemento deben combinarse con el color de fondo del elemento. La propiedad toma valores como lighten, darken, multiply, saturation, overlay, soft-light, color-dodge, hard-light etc.

La propiedad background-blend-mode combina el background-color con la background-image. El valor por defecto de la propiedad background-blend-mode es normal.

Podemos usar la propiedad para proporcionar una superposición a la imagen de fondo. Podemos usar la propiedad background-blend-mode después de configurar la imagen de fondo.

Por ejemplo, cree un div en HTML. En CSS, configura la imagen de fondo usando la función url() y configura los valores no-repeat y fixed en la propiedad background.

A continuación, establezca la altura en 100vh para el div. Aplicar el valor hidden para la propiedad overflow.

Asimismo, establezca la propiedad background-color con el valor rgba(50, 70, 80, 0.7). Finalmente, use el background-blend-mode y establezca su valor a soft-light para añadir un efecto de superposición a la imagen de fondo.

Código de ejemplo:

<div id="main">
</div>

 #main {
 background: url("/img/DelftStack/logo.png") no-repeat fixed;
 height: 100vh;
 overflow: hidden;
 background-color: rgba(50, 70, 80, 0.7);
 background-blend-mode: soft-light;
}