Перейти к содержанию

opacity

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

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

Демо

Шрифт и Цвет

Синтаксис

1
2
3
4
5
6
7
8
9
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.

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

1
opacity: 1;

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

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

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

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

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!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>

Комментарии