0

Tengo el siguiente código

div{
    display: grid;
    place-content: center;
    font-family: sans-serif;
    min-height: 100vh;
    padding-inline: 2rem;
    background-image: url(https://picsum.photos/1400/500);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    position: relative;
}

h1{
    color: #fff;
    text-shadow: 0 0 10px rgba(0, 0, 0, .5);
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div>
        <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique error eveniet obcaecati rerum hic assumenda ipsum aperiam nemo, consequatur perferendis totam dolor repellendus autem non magnam veniam repudiandae facilis! Quisquam?</h1>
    </div>
</body>
</html>

Pero no encuentro la forma de añadirle ahora un color por encima como para poner el color que yo quiera. Intente usar un ::before absolute para poner un color con opacidad pero el elemento ::before tambien termina en escala de grises.

La idea es usar un backgound sin importar la imagen y que yo pueda cambiarle el color a una escala de Azules, rojos, verdes, etc.

Seria excelente una manito con eso porque recuerdo haber visto en una ocasion esa funcion, pero no pude encontrar en mi historial ese video.

1 respuesta 1

-1

Para añadir un color sobre la imagen de fondo sin afectar la escala de grises que se aplica con el filtro grayscale(100%), puedes utilizar la propiedad background-color junto con una capa ::before en el elemento div.

La capa ::before se puede usar para añadir contenido adicional a un elemento mediante CSS sin tener que utilizar un elemento HTML adicional. Se puede colocar la capa ::before sobre la imagen de fondo mediante la propiedad z-index.

Aquí te dejo como quedaría tu css en ese div

div::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 255, 0.5); /* color azul con opacidad del 50% */
  z-index: -1; /* coloca la capa detrás de la imagen de fondo */
}

Con esta modificación, se añadirá una capa azul con opacidad del 50% sobre la imagen de fondo. Puedes cambiar el color y la opacidad de la capa ::before utilizando diferentes valores para la propiedad background-color.

1
  • 1
    El código no funciona, siempre puedes terminar el ejemplo ejecutable aqui mismo para validar las cosas, pero muchas gracias de todas formas. Commented el 5 ene. 2023 a las 21:43

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.