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

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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