0

tengo un problema de estilo. Intento darle este efecto a una imagen: imagen

El problema es que al agregarle la propiedad filter, me cambia el texto de color.

El código HTML y CSS es el siguiente:

.c-hero {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 10% 70%;
  background-image: linear-gradient(right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.6)), url(./img/hero.jpg);
  filter: saturate(170%);
  padding-bottom: 100px;
  min-height: 75vh;
}

.text-primary {
  color: theme-color("primary") !important;
}
<section class="c-hero">
  <div class="container">
    <div class="row">
      <div class="col-12">
        <h1 class="text-primary">Lorem ipsum</h1>
      </div>
    </div>
  </div>
</section>

El color que debería tener el texto, es el siguiente: #661E7B rbg(102, 30, 123)

Sin embargo con filter, se cambia por: #890FAD rgb(137, 15, 173)

Ya estuve investigando anteriormente en otras páginas y otras preguntas similares, pero ninguna me ha funcionado hasta el momento.

1 respuesta 1

0

Tienes el texto dentro de .c-hero por lo que todo lo que hagas con .c-hero afectara a sus hijos, incluido el texto. Algunas opciones que tienes:

  • Aplicar el filtro al reves al texto, es decir, si le haces un filter:saturate(200%); al padre , aplica un filter:saturate(50%); al hijo (el texto, .text-primary ) para "deshacer" el efecto.

  • Meter la imagen de forma independiente. Si no quieres/puedes tocar el marcado html puedes hacer algo parecido a :

.c-hero {
  padding-bottom: 100px;
  min-height: 75vh;
}
.c-hero:before{
  width:100%;
  height:100%;
  content:"";
  position:absolute;
  z-index:-1;
  left:0;
  top:0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 10% 70%;
  background-image: linear-gradient(right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.6)), url(./img/hero.jpg);
  filter: saturate(170%);
}
.text-primary {
  color: theme-color("primary") !important;
}

1
  • ¡Muchas gracias, @Montaycabe ! el 30 jul. 2018 a las 14:23

Tu Respuesta

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

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