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

contrast() メソッド

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

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

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

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

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

ページ内 Index

構文(Syntax)

CSS

contrast( number | percentage );

引数

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

Example

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