CSS свойство opacity
Определяет уровень прозрачности элемента веб-страницы. Уровень прозрачности описывает то, насколько элемент просвечивает и как сквозь него видны другие элементы, расположенные за ним. Так, значение в 1 означает полную непрозрачность элемента, значение 0.5 означает, что элемент прозрачен на 50%, а 0 — полную прозрачность.
Внимание: При использовании свойства opacity для управления прозрачностью фона элемента, все его потомки также получают такой же уровень прозрачности. Это может сделать текст внутри полностью прозрачного элемента нечитаемым. Если вы не хотите, чтобы прозрачность применялась к потомкам элемента, используйте установку цвета при помощи функции RGBA.
CSS синтаксис
opacity: число | initial | inherit;
Возможные значения
| Значение | Описание |
|---|---|
| число | Устанавливает уровень прозрачности от 0.0 (полная прозрачность) до 1.0 (полная непрозрачность). |
| inherit | Значение наследуется от родительского элемента. |
| initial | Устанавливает значение по умолчанию. |
Пример использования
Устанавливаем уровень прозрачности для элемента
Свойство opacity
Свойство opacity задает полупрозрачность элементу. Если у элемента задана полупрозрачность — это значит, что через него будут просвечивать те элементы, которые лежат под ним.
Свойство принимает своим значением дробное число от 0 до 1 . При этом значение 0 — это полная прозрачность, а значение 1 — полная непрозрачность. Промежуточное значение, например 0.3 , задает полупрозрачность. Значение по умолчанию: 1 .
Синтаксис
Пример
В данном примере блоку добавлена полупрозрачность и через границу и текст этого блока просвечивает фон родителя:
opacity
Прячем элемент на странице, делая его полностью или частично прозрачным.
Время чтения: меньше 5 мин
Открыть/закрыть навигацию по статье
Обновлено 8 мая 2023
Кратко
Скопировать ссылку «Кратко» Скопировано
Свойство opacity управляет прозрачностью элемента. С его помощью можно полностью спрятать текст или элемент. А можно сделать полупрозрачным — дизайнеры любят такой приём на современных сайтах.
Пример
Скопировать ссылку «Пример» Скопировано
Элемент станет прозрачным:
.selector opacity: 0;>.selector opacity: 0; >
Элемент полупрозрачный, сквозь него видно фон:
.selector opacity: 0.5;>.selector opacity: 0.5; >
Элемент совсем непрозрачный:
.selector opacity: 1;>.selector opacity: 1; >
Как пишется
Скопировать ссылку «Как пишется» Скопировано
Свойство opacity принимает дробные или целые значения от 0 до 1 включительно. 0 будет означать полную прозрачность, а 1 полную непрозрачность (значение по умолчанию).
Как понять
Скопировать ссылку «Как понять» Скопировано
Можно представить, что 0 равен 0% видимости элемента, а 1 в свою очередь 100% видимости элемента. Указывая любые промежуточные значения вы гибко управляете видимостью.
Стоит быть внимательным с этим свойством: невидимый элемент всё равно остаётся на странице и продолжает влиять на поток документа. Грубо говоря, если вы скроете какой-то блок при помощи opacity , то он просто будет невидим, но не перестанет занимать своё место, его соседи не займут его место, а родитель не схлопнется, если это был единственный ребёнок.
Представьте, что элемент просто надевает Мантию-невидимку как у Гарри Поттера.
Подсказки
Скопировать ссылку «Подсказки» Скопировано
�� Свойство прозрачности можно анимировать ��
�� Элемент не пропадает со страницы, продолжает влиять на поток документа.
�� Можно задавать любые дробные значения. Например, 0.33 или 0.1.
�� Это не наследуемое свойство. НО! Если родителю задано это свойство, то и все дети вместе с ним будут становиться прозрачными.
�� Вместо opacity : 0 можно использовать свойство visibility : visibility : hidden — будет тот же результат.
�� В дробных значениях можно опустить первый ноль: opacity : . 5 . И всё равно будет работать ��♀️
На практике
Скопировать ссылку «На практике» Скопировано
Алёна Батицкая советует
Скопировать ссылку «Алёна Батицкая советует» Скопировано
�� Очень частый кейс — сделать полупрозрачную заливку поверх картинки. Это обычно называют оверлеем или вуалью. В этом случае не стоит применять свойство opacity , работайте с полупрозрачными цветами с альфа-каналом.
selector position: relative;> selector:before content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgb(0 0 0 / 0.5); /* или в формате HEX background-color: #00000080; */>selector position: relative; > selector:before content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgb(0 0 0 / 0.5); /* или в формате HEX background-color: #00000080; */ >
�� Когда-то была популярна шутка, что если ваш заказчик не заплатил вам, то его можно шантажировать следующим способом: цепляете на сайт скрипт, который будет каждый день уменьшать opacity для body на 0.1 пока сайт полностью не пропадёт или пока заказчик не заплатит ��
Если что, это не я вам рассказала ��
CSS свойство opacity
Свойство opacity определяет уровень прозрачности элемента. Opacity — это противоположный эффект прозрачности.
Это свойство дает возможность сделать элемент полностью или частично прозрачным.
Свойство принимает значения в диапазоне от 0 до 1. Значение по умолчанию равно 1, при котором элемент становится полностью непрозрачным. Значение 0 делает элемент полностью прозрачным.
Значения между 0 и 1 делают элемент полупрозрачным.
Отрицательные значения допустимы.
Когда добавляем прозрачность к фону элемента при помощи свойства opacity, все дочерние элементы тоже становятся прозрачными. Используйте цветовые коды RGBA если не применяйте свойство opacity для дочерних элементов.
| Значение по умолчанию | 1.0 |
| Применяется | Ко всем элементам. |
| Наследуется | Нет |
| Анимируемое | Да |
| Версия | CSS3 |
| DOM синтаксис | object.style.opacity = «0.3»; |
Синтаксис
opacity: number | initial | inherit;Пример
html> html> head> title>Заголовок документа title> style> .example1 < background-color: #8ebf42; opacity: 0.3; filter: Alpha(opacity=50); > .example2 < background-color: #8ebf42; opacity: 1; filter: Alpha(opacity=50); > style> head> body> h2>Пример свойства opacity h2> h3>Opacity level is 0.3; h3> div class="example1">Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. div> h3>Opacity level is 1; h3> div class="example2">Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. div> body> html>Пример, где уровень прозрачности первого изображения равен 1.0, у второго изображения прозрачность равна 0.6, а у третьего — 0.2:
Пример
html> html> head> title>Заголовок документа title> style> img.a< opacity: 1; filter: alpha(opacity=100); > img.b< opacity: 0.6; filter: alpha(opacity=100); > img.c< opacity: 0.2; filter: alpha(opacity=100); > style> head> body> h2>Пример свойства opacity h2> h3>Opacity: 1.0; h3> img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="house" width="300" height="300" class="a"> h3>Opacity: 0.6; h3> img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="house" width="300" height="300" class="b"> h3>Opacity: 0.2; h3> img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="house" width="300" height="300" class="c"> body> html>