tengo un problema de estilo.
Intento darle este efecto a una 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.