86 of 313 menu

Функция invert

Функцията invert позволява да инвертирате цветовете във фоново изображение. Стойност 0 означава, че изображението остава оригинално. Стойност 100% или 1 напълно инвертира цветовете на фона. Всяко число в този диапазон частично инвертира цветовете. Отрицателни стойности не могат да се задават. По подразбиране стойността е 0.

Синтаксис

селектор { filter: invert(число); }

Пример

Нека инвертираме цветовете на нашето изображение до стойност 50%:

<div id="elem"></div> #elem { filter: invert(50%); background: url("bg.png") center / cover no-repeat; width: 400px; height: 300px; border: 1px solid black; }

:

Пример

А сега нека напълно инвертираме цветовете на нашето изображение до стойност 100%:

<div id="elem"></div> #elem { filter: invert(100%); background: url("bg.png") center / cover no-repeat; width: 400px; height: 300px; border: 1px solid black; }

:

Пример

А сега нека зададем във функцията invert стойност равна на 0:

<div id="elem"></div> #elem { filter: invert(0); background: url("bg.png") center / cover no-repeat; width: 400px; height: 300px; border: 1px solid black; }

:

Вижте също

  • функцията blur,
    която размазва фона
  • функцията brightness,
    която задава яркост на фона
  • функцията contrast,
    която задава контрастност на фона
  • функцията drop-shadow,
    която задава сянка на фона
  • функцията hue-rotate,
    която задава цветовата наситеност на фона
  • функцията opacity,
    която задава прозрачност на фона
  • функцията sepia,
    която преобразува фона в сепия
  • свойството background,
    което е свойство-съкращение за фона
  • свойството background-image,
    с което на блок може да се зададе фонова картинка
  • свойството filter,
    което задава стил за фона
Български
AfrikaansAzərbaycanবাংলাБеларускаяČeštinaDanskDeutschΕλληνικάEnglishEspañolEestiSuomiFrançaisहिन्दीMagyarՀայերենIndonesiaItaliano日本語ქართულიҚазақ한국어КыргызчаLietuviųLatviešuМакедонскиMelayuမြန်မာNederlandsNorskPolskiPortuguêsRomânăРусскийසිංහලSlovenčinaSlovenščinaShqipСрпскиSrpskiSvenskaKiswahiliТоҷикӣไทยTürkmenTürkçeЎзбекOʻzbekTiếng Việt
Ние използваме бисквитки за работата на сайта, анализ и персонализация. Обработката на данни се извършва в съответствие с Политика за поверителност.
приемам всички настройки отхвърляне