文字の色を変更する方法としてcolorがあります。しかし、以下のようにcolorではグラデーションや画像を表示することができません。ここでは、文字列にグラデーションや画像の表示方法を紹介していきます。
/* 全てNG */
color: url(https://pg-himajin.com/wp-content/uploads/2023/06/page551-1.png);
color: linear-gradient(90deg,red, green,blue);
color: -webkit-linear-gradient(0deg,red, green,blue);文字にグラデーション・画像を表示するためには？
グラデーションや画像を表示させるためには、「background-clip」を利用していきます。「background-clip」は、「background」の表示範囲を決めることができます。つまり、「background-clip」を利用してテキストに表示させるようにします。
background-clip: text;
-webkit-background-clip: text;実装方法
グラデーションや画像の表示を説明していきます。
手順1：グラデーションの背景を準備します
以下のようにグラデーションの背景をbackgroundで表示させます。
手順2：背景を文字に表示します
背景（background）を文字に表示させるためにbackground-clipを先ほどグラデーションを指定したスタイルに追加していきます。
記載例は以下のようになります。
手順3：文字を透明にします
手順2までの場合、文字の色（color）が表示されてしまい、背景（background）が表示されません。そこで文字の色を透明にして背景を表示させます。
記載例は以下のようになります。
文字に画像を表示させるには？
文字に画像を表示するには、以下のようにbackgroundにurl()を指定します。