Как изменить linear-gradient?

Question

[Za Za]

есть это

-webkit-mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: left top, left bottom;
    -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1) 80%, rgba(0,0,0,0));

Текст при скроле исчезает сверху.

Нужно чтоб он и снизу так же исчезал....

Поиграться можно тут: codepen

Answer 1

[Дмитрий]

-webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 80%, rgba(0,0,0,0));
instead
-webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1) 80%, rgba(0,0,0,0));

Comments

[Za Za]

а как сделать чтоб вторая строка не имела приоритет над первой и не выключала ее в css?

[Дмитрий]

-webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 80%, rgba(0,0,0,0));
попробуйте изменить это число

[Za Za]

Дмитрий, Нужно чтоб он и снизу так же исчезал....
не только снизу - а также сверху... и сверху и снизу была область которая прозрачная в середине не прозрачная

[Дмитрий]

-webkit-mask-image: linear-gradient(to top, rgba(0,0,0,0), rgba(0,0,0,1) 30%, rgba(0,0,0,1), rgba(0,0,0,0));

[Za Za]

Дмитрий, работает!
а возможно изменить прозрачность сверху оставить на 80%, а снизу на 5% например?

[Дмитрий]

-webkit-mask-image: linear-gradient(to top, rgba(0,0,0,0), rgba(0,0,0,1) изменить здесь%, rgba(0,0,0,1) изменить здесь%, rgba(0,0,0,0));

поменяйте здесь цифры и сделайте выбор прозрачности как вам нужно

[Za Za]

Дмитрий, спасибо!