<style>
.slide img {
    width: 100%;
    height: 500px;
    filter: grayscale(.9);
}
.slide {
    position: relative;
}
.bg-text {
    position: absolute;
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    color: #fff;
    z-index: 99;
}
</style>

<div class="slide">
    <div class="bg-text">
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Libero aut saepe enim hic ab officiis perspiciatis sequi nam optio inventore. Modi esse voluptas ipsa nulla dolorem nisi fugit nostrum repellendus.</p>
    </div>
    <img src="https://images.ctfassets.net/hrltx12pl8hq/5KiKmVEsCQPMNrbOE6w0Ot/341c573752bf35cb969e21fcd279d3f9/hero-img_copy.jpg?fit=fill&w=800&h=300" alt="">
</div>

Div'e verdiğin filter divin içinde ki tüm elemanları da kapsar. Onun yerine bir div'e img ve text ver, position ile divin top:0'ına al ve img'e filter ver. Bu kodu kullanırsan istediğini uygulayabilirsin.