CSS3 グラデーションを使用してテキストの色のグラデーションを実現するにはどうすればよいですか?

最近のWebデザインでは、グラデーションを取り入れたデザインが増えているように感じます。今回はCSS3のグラデーションを文字に適用する方法と、文字の上に画像を塗りつぶす方法を紹介します。

テキストにカラー グラデーションを適用する

これは、テキストの背景色に設定されるグラデーション カラーです。現在サポートされているブラウザは、Google Chrome、Safari、Opera です。 （おすすめコース：CSS3ビデオチュートリアル）

HTML

<h1>你好，PHP中文网</h1>

HTMLには、グラデーションにするテキストがそのままリストされます。

CSS

h1{
  color: #ACB6E5;
  background: -webkit-linear-gradient(90deg, #ACB6E5, #86FDE8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

効果は次のとおりです。

角度を指定して色の位置を変更することもできます。グラデーションをかけて少し粗いテクスチャにします。

CSS

h1{
  color: #FF7C00;
  background: -webkit-linear-gradient(top, #FFB76B 0%, #FFA73D 50%, #FF7C00 51%, #FF7F04 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

効果は次のとおりです:

画像を使用してテキストの色を塗りつぶします

背景色としてグラデーション カラーを設定するだけでなく、画像を使用してフォントの色を設定することもできます。

この画像を使用して背景の色を設定しましょう

コードは次のとおりです:

	
	


<h1>你好，PHP中文网</h1>

効果以下のとおりであります： ＃＃＃ ＃＃＃＃＃＃＃＃＃＃＃＃

以上がCSS3 グラデーションを使用してテキストの色のグラデーションを実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。