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

saturate() メソッド

 saturate() メソッドは、引数から彩度の値を返す CSS 関数です。

 色の三属性(色相明度・彩度)の一つで、彩度はあざやかさの度合いです。彩度を上げると、より鮮明に。下げるとくすみが増します。

 引数が 1 で標準の彩度で、値が小さくなるほど彩度が小さくなります。0 で彩度はなく、白黒で表示されます。
 引数が 1 より大きいと元より彩度が増します。

saturate() メソッド
saturate( 1.2 );
詳しくは「Example」を参照してください

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

ページ内 Index

構文(Syntax)

CSS

saturate( number | percentage );

引数

 引数が 1 で標準の彩度で、値が小さくなるほど彩度が小さくなります。0 で彩度はなく、白黒で表示されます。
 引数が 1 より大きいと元より彩度が増します。

Example

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