CSS свойство opacity
CSS свойства
Определение и применение
CSS свойство opacity определяет уровень прозрачности для элемента (1 - элемент непрозрачный (это значение по умолчанию), 0,5/50% - среднее значение, 0 - элемент полностью прозрачный).
Поддержка браузерами
| Свойство |  Chrome |  Firefox |  Opera |  Safari |  IExplorer |  Edge |
|---|---|---|---|---|---|---|
| opacity | 4.0 | 2.0 | 9.0 | 3.1 | 9.0 | 12.0 |
CSS синтаксис:
opacity: "number | initial | inherit";
JavaScript синтаксис:
object.style.opacity = "1"
Значения свойства
| Значение | Описание |
|---|---|
| number | Определяет уровень прозрачности для элемента (1 - элемент непрозрачный (это значение по умолчанию), 0,5/50% - среднее значение, 0 - элемент полностью прозрачный). |
| initial | Устанавливает свойство в значение по умолчанию. |
| inherit | Указывает, что значение наследуется от родительского элемента. |
Версия CSS
CSS3Наследуется
Нет.Анимируемое
Да.Интерактивный пример
Значения свойства opacity:
CSS код:
div { opacity: ; }
Результат:
Пример использования
<!DOCTYPE html> <html> <head> <title>Пример использования свойства opacity</title> <style> .ham1 { opacity: 0.5; } .ham2 { opacity: 0.1; } </style> </head> <body> <img src ="/images/notepad.png" alt = "hameleon_1"> <img src ="/images/notepad.png" alt = "hameleon_2" class = "ham1"> <img src ="/images/notepad.png" alt = "hameleon_3" class = "ham2"> </body> </html>
В данном примере мы разместили три изображения (элементы <img>) с прозрачностью 1 (значение по умолчанию), 0.5 (изображение с классом .ham1) и 0.1 (изображение с классом .ham2):
CSS свойства