方法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コードを追加することで、テキストの色を反転させることができます。
なお、これらの方法は最新のウェブブラウザでサポートされていますが、一部の古いブラウザでは正しく動作しない場合があります。