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

sepia() メソッド

 sepia() メソッドは、引数の値からセピア色の値を返す CSS 関数です。

 引数が 0 でセピア色度は 0 、元の色です。値が増すほどセピア色度が増します。1 で完全なセピア色です。

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

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

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

ページ内 Index

構文(Syntax)

CSS

sepia( number | percentage );

引数

 引数が 0 または 0% でセピア色度は 0 、元の色です。値が増すほどセピア色度が増します。1 または 100% で完全なセピア色です。

Example

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