Как применить градиент CSS по тексту, от прозрачного до непрозрачного цвета

Ура!

Я новичок в CSS/HTML, но я хочу применить градиент над текстом, как на изображении ниже. Как я могу реализовать его с помощью css?

enter image description here

Ответы

Ответ 1

Попробуйте этот пример: http://jsbin.com/iwepas/3/ (протестирован на Firefox 18)

Соответствующий 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 */
}

Выход

output

Обратите внимание: в более раннем браузере вам может потребоваться использование прозрачного-непрозрачного фона png, применяемого к псевдоэлементу, в то время как другому браузеру необходимы префиксы поставщика для linear-gradient

Ответ 2

Текстовые градиенты CSS3, поддерживаемые только браузерами Webkit, такими как Chrome и Safari. Я использовал 3 разных метода. сначала проверьте эту скрипту http://jsfiddle.net/sarfarazdesigner/pvU7r/ Попробуйте это

.article{
  background: -webkit-linear-gradient(#eee, #333);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

это отлично работает в хроме, не знаю, как реагирует другой браузер. Ссылка взята из http://css-tricks.com/snippets/css/gradient-text/