備忘録的プログラミングリファレンス

invert() メソッド

 invert() メソッドは、引数の値から反対色の値を返す CSS 関数です。引数には、反対色までの度合いを指定します。

 0 が標準で、何も変化はありません。
 値が大きくなるほど反対色が強くなります。100% または 1 で完全な反対色です。

invert() メソッド
.content {
	filter: invert( 1 );
}
詳しくは「Example」を参照してください

 invert() メソッドは、filterbackdrop-filter プロパティといった <filter-value-list> を使用するプロパティで利用します。

ページ内 Index

構文(Syntax)

CSS

invert( number | percentage );

引数

 0 が標準で、何も変化はありません。
 値が大きくなるほど反対色が強くなります。100% または 1 で完全な反対色です。

Example

 invert() メソッドの例です。backdrop-filter プロパティで invert() メソッドを使用しています。
 backdrop-filter プロパティは子エレメントで使用します。 backdrop-filter プロパティは、子エレメントの後ろにある内容に影響があることが分かります。
 ここでは、親エレメントにテキストと背景画像の設定があります。子エレメントの位置を調整して親エレメントのテキストと背景がどのように表示されるかを試しています。