Hue-rotate funksiýasy

hue-rotate funksiýasy fon suratynyň reňkliligini reňk tegelegindeki reňk öwrülişi arkaly üýtgetmäge mümkinçilik berýär. Aýratynlygyň bahalary graduslarda görkezilýär, ol reňk tegeleginiň burçuny görkezýär. 0 ýa-da 360 bahasy suratyň üýtgemeýändigini görkezýär, bu aralygyň içindäki islendik san fonuň reňk öwrülişiniň üýtgemegine getirýär. Bellenen hali boýunça baha 0deg deňdir.

Sintaksis

cssselektor {
  filter: hue-rotate(burç);
}

Mysal

Geliň suratymyz üçin reňkliligi 150deg deň edeliň:

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

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

Результат:

Mysal

Indi suratyň reňkliligini 50deg deň edeliň:

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

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

Результат:

Mysal

Geliň aýratynlykda hue-rotate bahasyny görkezmezden geçeliň:

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

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

Результат:

Şeýle-de serediň