セピア関数

関数 sepia は、 背景画像をセピア調（茶色がかったモノクロ画像）にすることができます。 値 0 は、画像が元のままであることを示します。 値 100% または 1 は、背景を完全にセピア調に変換します。 この範囲内の任意の数値は、セピア効果を線形に適用することを設定します。 負の値を設定することはできません。 デフォルト値は 0 です。

構文

cssセレクター {
  filter: sepia(数値);
}

例

私たちの画像を完全なセピア調にしてみましょう:

html<div id="elem"></div>

css#elem {
  filter: sepia(100%);
  background: url("bg.png") center / cover no-repeat;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

例

では、セピア効果を 50% に減らしてみましょう:

html<div id="elem"></div>

css#elem {
  filter: sepia(50%);
  background: url("bg.png") center / cover no-repeat;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

例

では、関数 sepia の値を 0 に設定してみましょう:

html<div id="elem"></div>

css#elem {
  filter: sepia(0);
  background: url("bg.png") center / cover no-repeat;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

関連項目