css - CSS：グラデーションテキストの色？

Question

グラデーションカラーのテキストを取得しようとしていますが、その方法がわかりません。私はそれをこのようにしようとしています：

私が試したのは唯一のことですが-webkit-mask、それを思い通りに機能させることができませんでした。他のものはプロパティ-webkit-gradientにありcolorます-それは可能ですか？

ブラウザ間の互換性はかなり重要ですが、世界の終わりではありません。全体を画像に変換するよりも、IEでテキストを単色にする方がいいと思います（このようなテキストはかなりあり、一部は動的です）。

Answer 1

Webkitベースのブラウザ（ChromeおよびSafari）の場合：

.text {
  font-size: 20px;
  background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#111));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

IEなどの場合：

http://www.webdesignerwall.com/demo/css-gradient-text/