0

quiero dar un efecto como de filtro de color a toda la página que originalmente es blanco y negro. Podría poner un img o svg por encima de todos los elementos HTML y bajar la opacidad, pero quería saber si hay una manera mejor, más óptima y saber que estoy haciendo mal en mi código. He intentado tanto con z-index para poner el fondo de color por encima de la imagen de fondo pero no ha dado resultado.

Código HTML:

introducir la descripción de la imagen aquí

Código CSS:

introducir la descripción de la imagen aquí

Original:

introducir la descripción de la imagen aquí

Objetivo:

Objetivo:

4
  • 1
    Pon el código como texto, con formato. Stack Overflow en español incluso te da las herramientas como para agregar un ejemplo mínimo verificable en la pregunta (teniendo en cuenta que es de html + css) a través de un snippet (con el botón que indica <>). Lee Cómo preguntar.
    – padaleiana
    Commented el 13 jun. 2022 a las 19:12
  • Con CSS prueba con filter y transition en el body. En este enlace tienes algunos ejemplos de su uso.
    – masterguru
    Commented el 13 jun. 2022 a las 20:01
  • Un par de consejos. El primero, no vuelvas a mostrar tu código en imágenes. Es muy pesado para nosotros no poder copiar y pegar tu código para trabajar con él. En su lugar, escríbelo y formatéalo (selecciona el código escrito y pulsa Ctr+K) para poderlo usarlo nosotros también. Commented el 14 jun. 2022 a las 1:57
  • El segundo consejo es que compartas todo tu código si este no es muy grande. Veo que eres recién iniciado en este tema del desarrollo web. Muchas veces, sobre todo siendo principiante, pensamos que el fallo está en un lugar concreto y compartimos solo ese lugar concreto del código. Pero recuerda que estás empezando, luego tu capacidad crítica no es muy buena aún. Trata de pasar entonces todo el código y, si es muy largo, trata de replicar el problema en un "código de prueba" más pequeño para que los entendidos puedan estudiar bien el problema. Commented el 14 jun. 2022 a las 1:59

1 respuesta 1

1

Para añadir el efecto que buscas(creo que esto es lo que quieres), por ejemplo sobre el bloque de clase home, prueba con el siguiente código:

.home::before {
  content: "";
  background-color: /*Aquí tendrás que buscar el color quieres en formato rgba, y recuerda que el último parámetro es la opacidad*/;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}

Lo que estamos haciendo con este código (el cual es responsive) es añadir un bloque sobre .home (para más detalles, busca after y before en Internet) y posicionarlo en el centro. Es importante la sentencia content=""; para que el bloque tenga contenido, pues, de lo contrario, no existiría el bloque al ser un bloque vacío sin medidas especificadas (técnicamente existiría, pero sería infinitamente pequeño y no lo veríamos).

Te muestro un ejemplo propio:

Antes

imgAntes

Después

ImgDespues

Puedo jugar con el color y la transparencia del nuevo bloque para ajustar el efecto a cómo quiero que se vea.

Cualquier cosa, pregunta.

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.