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

invert() メソッド

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

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

invert() メソッド
.content {
	filter: invert( 1 );
}

詳しくは Example を参照してください

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

ページ内 Index

構文(Syntax)

CSS

invert( number | percentage );

引数

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

Example

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

関連するプロパティとメソッド

　invert() メソッドに関するプロパティとメソッドには以下のものがあります。

名称概要
プロパティ
filterエレメントに対して視覚効果（ぼかし、彩度、影付きなど）を指定するプロパティ
backdrop-filterエレメントの後ろの表示に「ぼかしや色相、コントラス卜」などの効果がある
メソッド
blur(px)ぼかし半径。値が大きいほどにぼやかしが大きくなる
brightness(%)明るさ調整。100%がdefault。
contrast(%)コントラスト調整。100%がdefault。
drop-shadow(h-shadow v-shadow blur spread color)エレメントに影を加えることができる。box-shadowプロパティと同じ値設定。
grayscale(%)グレイスケールに加工。0%がdefault。100%で完全な白黒表現。
hue-rotate(deg)色相を調整（反対色）。0degでdeafult。360degで反対色。
invert(%)ネガポジ反転。0%がdefault。100%で完全な反転色。
opacity(%)透過度を調整。100%がdefault。0%で見えなくなる。opacityプロパティと同じ値設定。
saturate(%)色の濃さをあらわす彩度。100%がdefault。0%で見えなくなる。
sepia(%)セピア加工。0%がdefault。100%で完全なセピア色。
url(URL)SVGフィルターが設定されたXMLファイルを取得。

関連（Related）