Sepia-funksjonen

Funksjonen sepia lar deg gjøre et bakgrunnsbilde til sepia - et svart-hvitt bilde med en brun nyanse. Verdien 0 betyr at bildet forblir uendret. Verdien 100% eller 1 gjør bakgrunnen helt sepia. Ethvert tall innenfor dette området bruker sepia lineært. Negativ verdi kan ikke brukes. Standardverdien er 0.

Syntaks

cssvelger {
  filter: sepia(tall);
}

Eksempel

La oss gjøre bildet vårt helt 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;
}

Результат:

Eksempel

La oss nå redusere sepia-effekten til 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;
}

Результат:

Eksempel

La oss nå sette funksjonen sepia til verdien 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;
}

Результат:

Se også