セピア関数

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

構文

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

例

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

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

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

例

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

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

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

例

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

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

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

セピア関数

構文

例

例

例

関連項目