Функција sepia

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

Результат:

Погледнете ги и