0

estoy haciendo un estilo de FULL INTRO y estoy poniendo una capa oscura en el fondo de imagen usando en CSS filter:brightness(0.4); pero le afecta tambien al texto, como hago para que el texto resalte y no sea parte de la capa oscura.

Mi codigo css:

.portada{
    background-image: url(../img/portada1.jpg);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
    filter:brightness(0.4);
}
.portada:before {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    content: "";
    background: #000;
    opacity: 0.5;
    z-index: 0;
}
.contenido{
    max-width: 60%;
    margin: 0px auto;
    text-align: center;
    padding: 2.5em 10px;
}
.contenido .titulo{
    font-family: 'Montserrat', sans-serif;
    color: #e0822f;
    font-weight: 500;
    font-size: 4.5em;
}
.contenido .subtitulo{
    font-family: 'Montserrat', sans-serif;
    color: #e8d696;
    font-size: 1.3em;
}

html

<header>
   <div class="portada"></div>
      <div class="contenido">
         <h1 class="titulo">Restaurante Web</h1>
         <div class="subtitulo">Web para Restaurante en HTML 5, CSS3 Y JAVASCRIPT con Full Responsive.
        </div>
      </div>
 </header>

.........

introducir la descripción de la imagen aquí

3
  • pon el código html. ¿Es un div, una imagen? Edita tu pregunta
    – Rene Limon
    Commented el 22 feb. 2018 a las 20:28
  • Mirando el código CSS me da la sensación de que está incompleto, no queda claro a qué elemento le estás aplicando tanto la imagen de fondo como el filtro. Commented el 22 feb. 2018 a las 20:45
  • La única forma de hacerlo es que la imagen de fondo, no esté en el elemento contenedor del texto, ya que filter se aplica tanto al contenedor como sus elementos anidados. En las respuestas te han dado la pista de usar pseudoelementos como ::before para aplicar el fondo en este y ahí si aplicar el filter, sí ves que te funciona, te pido lo votes positivamente y elijas su respuesta como válida. Commented el 22 feb. 2018 a las 22:58

2 respuestas 2

2

Puedes hacerlo con before en CSS agregando este código a tu CSS

 .contenido {
    background-image: url(../img/portada1.jpg);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
    filter: brightness(0.4);
}

.contenido:before {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    content: "";
    background: #000;
    opacity: 0.5;
    z-index: 0;
}


Espero que te sirva, si no resaltan los texto agrégale z-index: 1; a la clase titulo y subtitulo

2
  • no me resulta este código, el único cambio que obtuve es tener la capa mas oscura. Commented el 22 feb. 2018 a las 23:46
  • 2
    @GianCarloConyas Si no te funcionó, no deberías marcarla como respuesta aceptada ya que puede confundir al resto de usuarios y que piensen que ya has obtenido una respuesta que ha solucionado tu problema. Commented el 23 feb. 2018 a las 0:09
1

Puedes hacer uso de filter de css

.portada{
    background-image: url(../img/portada1.jpg);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
    -webkit-filter: grayscale(50%);
    filter: grayscale(50%);
}

html

<header>
   <div class="portada"></div>
      <div class="contenido">
         <h1 class="titulo">Restaurante Web</h1>
         <div class="subtitulo">Web para Restaurante en HTML 5, CSS3 Y JAVASCRIPT con Full Responsive.
        </div>
      </div>
 </header>

Con respecto al texto bastaría con que tu le des un color que haga contraste, si la imagen de fondo sera oscura, procura usar colores claros en los textos.

Te dejo estos dos links donde tienes mas ejemplos sobre los filtros que puedes aplicar

Link 1

Link 2

Ten en cuenta que esta propiedad no es soportada en algunos navegador y en otros debes hacer uso de -webkit- y -moz-

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.