Свойство opacity

Свойство opacity задает степень непрозрачности объекта. Степень непрозрачности задается вещественным числом в диапазоне от 0 (полностью прозрачно) до 1 (полностью непрозрачно), любое значение вне данного диапазона урезается до 0 или 1. Параметр непрозрачности равномерно применяется ко всему элементу. Свойство opacity не наследуется, и, по умолчанию, равняется 1. Непрозрачность была введена в модуле CSS3 Цвет.

Примеры использования

Значение Результат 
 
.element-opacity-1 {
    opacity: 0.00;
}
.element-opacity-2 {
    opacity: 0.25;
}
.element-opacity-3 {
    opacity: 0.50;
}
.element-opacity-4 {
    opacity: 0.75;
}
.element-opacity-5 {
    opacity: 1.00;
}
  • прозрачный блок
    (opacity = 0)
  • полу-прозрачный блок
    (opacity = 0.25)
  • полу-прозрачный блок
    (opacity = 0.5)
  • полу-прозрачный блок
    (opacity = 0.75)
  • непрозрачный блок
    (opacity = 1)

Свойство opacity определено в спецификации CSS 3 модуль Color Level 3 (цвет, уровень 3), применяется к всем элементам, и действует на всех визуальные носителях, его значение не наследуется от родительского элемента в иерархии документа, и по умолчанию принимает значение 1. На данный момент свойство поддерживается во всех основных браузерах.

Смотри также:

Краткое описание

степень прозрачности

Синтаксис:

<альфа-значение> | inherit

По умолчанию:

1

Применяется к:

всем элементам

Наследование:

не наследуется

Тип носителя:

визуальные

Объектная модель документа (DOM):

[элемент].style.opacity

Кроссбраузерная совместимость

Internet Explorer

5+

Firefox

2.0+

Chrome

1.0+

Safari

1.0+

Opera

8.5+