html.okpython.net
Основы создания сайтов
CSS :: Свойство opacity
css-свойство opacity (от англ. opacity – непрозрачность) задает уровень прозрачности элемента. При этом даже полностью прозрачный элемент остается в потоке документа, поэтому его место не занимается другими элементами страницы. Кроме того, через частично прозрачный элемент будут просвечиваться фон и другие элементы, расположенные за ним вдоль оси Z.
Характеристики
- Значение по умолчанию: 1.
- Применяется: ко всем элементам.
- Наследуется: нет.
- Анимируется: да.
- JavaScript: object.style.opacity="value".
Синтаксис
opacity: <число>
Значения
В качестве значения принимает числа от 0.0, когда элемент становится полностью прозрачным, до 1, когда элемент становится полностью непрозрачным.
Ссылки
Официальный сайт W3C: https://drafts.csswg.org/css-color-3/#opacity
Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/opacity
Примеры
HTML
Результат
htmlCodes
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Пример №1</title> <style> .div_opacity{ width: 200px; height: 60px; padding: 5px; margin: 10px; border: solid 5px blue; background-color: yellow; } .vis_1{opacity: 0;} .vis_2{opacity: 0.4;} .vis_3{opacity: 0.8;} .vis_4{opacity: 1;} </style> </head> <body> <div style="background-color: green;"> <div class="div_opacity vis_1"> opacity: 0; </div> <div class="div_opacity vis_2"> opacity: 0.4; </div> <div class="div_opacity vis_3"> opacity: 0.8; </div> <div class="div_opacity vis_4"> opacity: 1; </div> </div> </body> </html>
Пример №1