Как запрозрачнить блок градиентом?

Question

[65536]

Столкнулся с задачей.

Есть блок с текстом и фоном. Текст может быть любой длины, но должен обрезаться до определенной высоты если не влазит. Нужно в низу блока сделать растворение, которое намекает что это не конец и можно развернуть. Проблема в том что фон текстового блока сам слегка прозрачный и должен просвечивать то, что под ним. Если бы не это можно было бы накрыть конец блока другим блоком с градиентом прозрачности и цветом равным фону. Но из-за прозрачности фона этот вариант не прокатывает.

Answer 1

[Сергей]

Можно использовать
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
с градиентом в нулевую плотность
пример: https://jsfiddle.net/o66mzoqm/

но с кроссбраузерностью данного метода могут вилы получиться =)

Comments

[65536]

спасибо! то, что нужно. не знал об этих вещах) в ушастом не работает. но в данном случае это проблемы тех, кто им пользуется

Answer 2

[I_Wizard]

jsfiddle.net/uE6pr/317
jsfiddle.net/uE6pr/316 вот так вот. Первый Вариант мне подошел. И в мозиле текст не пропадет, а просто затухание пропадет.

Comments

[65536]

спасибо) дизайнера уже казнили, кстати

Answer 3

[iBird Rose]

ну также делаешь как описал "Если бы не это можно было бы накрыть конец блока другим блоком с градиентом прозрачности и цветом равным фону.", но еще этому блоку даешь opacity какое-нить, чтобы он тоже был полупрозрачным и просвечивался фон.

Comments

[65536]

тогда не полностью будет запрозрачнивать, может образоваться резкая граница