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

contrast() メソッド

　contrast() メソッドは、引数の値からコントラストの値を返す CSS 関数です。

　コントラストとは、明暗の差を指します。コントラストが上げるほど、明るい部分はより明るく、暗い部分はより暗くなり、その差がはっきりとします。コントラストが下げると、明暗の差はなくなり、ぼやけたようにみえます。
　くっきりと見せたいときはコントラストを上げ、くっきりし過ぎるときはコントラストを下げます。

　引数は、100% または 1 が標準です。
　値が大きくなるほどコントラストが強くなります。100% または 1 より小さくなると薄くなり、 0 で灰色になります。

contrast() メソッド
.content {
	filter: contrast( 0.8 );
}

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

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

ページ内 Index

構文(Syntax)

CSS

contrast( number | percentage );

引数

　引数は、数値からパーセンテージです。100% または 1 が標準です。
　値が大きくなるほどコントラストが強くなります。100% または 1 より小さくなると薄くなり、 0 で灰色になります。

Example

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

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

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

名称概要
プロパティ
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）