Можно ли с помощью CSS применить маску градиента, чтобы переходить от фона к тексту?

У меня полноэкранное фиксированное фоновое изображение. Я хотел бы, чтобы текст в моем прокручиваемом div исчезал вверху, предположительно, применяя маску градиента к фону только в верхней части div. Я заинтересован в том, чтобы текст выглядел так, как будто он исчезает, когда пользователь прокручивает вниз, но все еще имеет большую область полной непрозрачности для фактического чтения текста.

Я знаю, что в webkit есть параметры маскировки, но я не могу найти способ перейти к фону страницы поверх содержащегося текста, применяя градиент только к небольшой части элемента.

Вот изображение желаемого результата: