Sepia funktsiyasi

sepia funktsiyasi fon rasmidan sepia yaratishga imkon beradi - jigarrang tusdagi oq-qora rasm. 0 qiymati rasm o'zgarishsiz qolishini bildiradi. 100% yoki 1 qiymati fonni butunlay sepiaga aylantiradi. Ushbu oraliqda joylashgan har qanday son sepia qo'llanishini chiziqli tarzda belgilaydi. Salbiy qiymat berib bo'lmaydi. Standart qiymat 0 ga teng.

Sintaksis

cssselector {
  filter: sepia(son);
}

Misol

Keling, rasmimizni to'liq sepiaga aylantiramiz:

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;
}

Результат:

Misol

Endi esa sepia qo'llanish darajasini 50% ga kamaytiramiz:

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;
}

Результат:

Misol

Endi esa sepia funktsiyasiga 0 ga teng qiymat beramiz:

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;
}

Результат:

Shuningdek qarang