Соответствующий CSS находится в pseudoelement :after обертки <article>, которую я использовал
article {
position: relative;
}
article:after {
position: absolute;
bottom: 0;
height: 100%;
width: 100%;
content: "";
background: linear-gradient(to top,
rgba(255,255,255, 1) 20%,
rgba(255,255,255, 0) 80%
);
pointer-events: none; /* so the text is still selectable */
}
Выход
Обратите внимание: в более раннем браузере вам может потребоваться использование прозрачного-непрозрачного фона png, применяемого к псевдоэлементу, в то время как другому браузеру необходимы префиксы поставщика для linear-gradient
Ответ 2
Текстовые градиенты CSS3, поддерживаемые только браузерами Webkit, такими как Chrome и Safari. Я использовал 3 разных метода.
сначала проверьте эту скрипту http://jsfiddle.net/sarfarazdesigner/pvU7r/
Попробуйте это