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

grayscale() メソッド

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

　filter や backdrop-filter プロパティといった <filter-value-list> を使用するプロパティで利用します。

　引数が 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 プロパティは、子エレメントの後ろにある内容に影響があることが分かります。
　ここでは、親エレメントにテキストと背景画像の設定があります。子エレメントの位置を調整して親エレメントのテキストと背景がどのように表示されるかを試しています。

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

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

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