CSSを使用してテキストの色を反転する方法


方法1: color プロパティを使用する方法 テキストの色を反転させるためには、color プロパティを使用します。通常のテキストの色を指定する際には、16進数やRGB値を使用しますが、色を反転させる場合は invert 値を使用します。

.inverted-text {
  color: invert;
}

上記のCSSコードを適用すると、.inverted-text クラスが指定された要素のテキストの色が反転されます。

方法2: filter プロパティを使用する方法 もう一つの方法として、filter プロパティを使用する方法があります。filter プロパティを使用すると、要素全体の色を変更することができます。

.inverted-text {
  filter: invert(100%);
}

上記のCSSコードを適用すると、.inverted-text クラスが指定された要素内のテキストと背景の色が反転されます。

これらの方法を使用すると、テキストの色を簡単に反転させることができます。適用する要素に対して適切なクラスを指定し、上記のCSSコードを追加することで、テキストの色を反転させることができます。

なお、これらの方法は最新のウェブブラウザでサポートされていますが、一部の古いブラウザでは正しく動作しない場合があります。