opacity
Поддержка браузерами
| 12.0+ | 9.0+ | 2.0+ | 4.0+ | 9.0+ | 3.1+ |
Примечание: браузер IE8 и более ранние версии поддерживает альтернативное CSS свойство filter.
Пример: filter: Alpha(opacity=50);
Описание
CSS свойство opacity (в переводе с анг. - непрозрачность) устанавливает уровень прозрачности элемента. Прозрачность задаётся числом от 0 (полная прозрачность) до 1 (полная непрозрачность).
Значение прозрачности применяется ко всему элементу, включая его содержимое, даже не смотря на то, что значение не наследуется дочерними элементами. Таким образом элемент, его содержимое, его дочерние элементы и содержимое дочерних элементов имеют одинаковый уровень прозрачности, даже если у самого элемента и его дочерних элементов установлены разные значения прозрачности.
Прозрачность картинки задаётся также с помощью CSS свойства opacity, примеры и код вы можете посмотреть в нашем самоучителе в уроке "CSS: Прозрачность".
Если вам нужно установить прозрачность только для фона блока, то следует использовать CSS свойство background или background-color со значением цвета в формате RGBA или HSLA. Если нужно задать прозрачность только для текста, то следует использовать свойство color со значением цвета в формате RGBA или HSLA.
| Значение по умолчанию: | 1 |
|---|---|
| Применяется: | ко всем элементам |
| Анимируется: | да |
| Наследуется: | нет |
| Версия: | CSS3 |
| Синтаксис JavaScript: | object.style.opacity=0.5 |
Синтаксис
opacity: число|inherit;
Значения свойства
| Значение | Описание |
|---|---|
| число | Указывает прозрачность. От 0.0 (элемент полностью прозрачный) до 1 (элемент полностью непрозрачный). |
| inherit | Указывает, что значение наследуется от родительского элемента. |
Пример
Элемент, который будет менять прозрачность.
background-color: lightblue;
width: 200px;
height: 100px;
opacity: 0.9;
}