Функция sepia

Функцията 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;
}

Вижте също

функция blur,
която размазва фона
функция brightness,
която задава яркост на фона
функция contrast,
която задава контрастност на фона
функция drop-shadow,
която задава сянка на фона
функция hue-rotate,
която задава цветност на фона
функция invert,
която инвертира цветовете на фона
функция opacity,
която задава прозрачност на фона
свойство background,
което е свойство-съкращение за фон
свойство background-image,
с което на блок може да се зададе фонова картинка
свойство filter,
което задава стил за фона