87 of 313 menu

Функция opacity

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

Синтаксис

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

Пример

Нека зададем прозрачност на нашето изображение 50%:

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

:

Пример

А сега нека зададем прозрачност 100%:

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

:

Пример

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

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

:

Вижте също

  • функция blur,
    която размазва фона
  • функция brightness,
    която задава яркост на фона
  • функция contrast,
    която задава контрастност на фона
  • функция drop-shadow,
    която задава сянка на фона
  • функция hue-rotate,
    която задава цветовата наситеност на фона
  • функция invert,
    която инвертира цветовете на фона
  • функция sepia,
    която преобразува фона в сепия
  • свойство background,
    което е свойство-съкращение за фон
  • свойство background-image,
    с което на блок може да се зададе фонова картинка
Български
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
Ние използваме бисквитки за работата на сайта, анализ и персонализация. Обработката на данни се извършва в съответствие с Политика за поверителност.
приемам всички настройки отхвърляне