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

grayscale() メソッド

 grayscale() メソッドは、引数の値から白黒の度合いを返す CSS 関数です。

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

 引数が 0 で白黒度は 0 、元の色です。値が増すほど白黒度が増します。1 で完全な色黒の表示です。

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

 似たメソッドに sepia() があります。sepia() メソッドはセピア色の度合いを返すメソッドです。

ページ内 Index

構文(Syntax)

CSS

grayscale( number | percentage )

引数

 引数は、数値またはパーセンテージです。100% または 1 が標準です。
 値が大きくなるほど明るくなります。100% または 1 より小さくなると暗くなり、 0 で真っ暗になります。

Example

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