opacity¶

Свойство opacity определяет уровень прозрачности элемента.

При частичной или полной прозрачности через элемент проступает фоновый рисунок или другие элементы, расположенные ниже полупрозрачного объекта.

Демо¶

Шрифт и Цвет

@font-face

Синтаксис¶

opacity: 0.9;
opacity: 90%;

/* Global values */
opacity: inherit;
opacity: initial;
opacity: revert;
opacity: revert-layer;
opacity: unset;

Значения¶

В качестве значения выступает число из диапазона [0.0; 1.0]. Значение 0 соответствует полной прозрачности элемента, 1, наоборот — его непрозрачности. Дробные числа вида 0.6 устанавливают полупрозрачность. Допускается писать числа без нуля впереди, вида opacity: .6.

Значение по-умолчанию:

opacity: 1;

Применяется ко всем элементам

Спецификации¶

CSS Color Module Level 3

Поддержка браузерами¶

Can I Use css-opacity? Data on support for the css-opacity feature across the major browsers from caniuse.com.

Описание и примеры¶

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>opacity</title>
    <style>
      .semi {
        opacity: 0.5; /* Полупрозрачность элемента */
      }
    </style>
  </head>
  <body>
    <p>
      <img src="image/igels.png" alt="Обычный рисунок" />
      <img
        src="image/igels.png"
        alt="Полупрозрачный рисунок"
        class="semi"
      />
    </p>
  </body>
</html>