Свойство CSS opacity: управление прозрачностью. CSS прозрачность - кросс-браузерное решение Как сделать элемент прозрачным и убрать прозрачность CSS

Описание

Определяет уровень прозрачности элемента веб-страницы. При частичной или полной прозрачности через элемент проступает фоновый рисунок или другие элементы, расположенные ниже полупрозрачного объекта.

Синтаксис

opacity: значение

Значения

В качестве значения выступает число из диапазона . Значение 0 соответствует полной прозрачности элемента, а 1, наоборот — его непрозрачности. Дробные числа вида 0.6 устанавливают полупрозрачность. Допускается писать числа без нуля впереди, вида opacity: .6 .

HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx

Результат данного примера показан на рис. 1.

Рис. 1. Результат использования opacity

Браузеры

Firefox до версии 3.5 поддерживает нестандартное свойство -moz-opacity .

Internet Explorer до версии 9.0 для изменения прозрачности использует фильтры, для этого браузера следует записать filter : alpha(opacity=50) , где параметр opacity может принимать значение от 0 до 100.

Свойство CSS opacity отвечает за прозрачность элементов (картинки, текста, блоки) в html.

Синтаксис CSS opacity

opacity : value ;

Где value может принимать вещественные значения в диапазоне от 0.0 до 1.0. Значение 1.0 - означает, что прозрачность отсутствует (по умолчанию).

Примеры: как прозрачность в html

Пример №1. Прозрачное изображение в html

Первая картинка выведена без прозрачности, вторая с прозрачностью 0.5

Пример №2. Эффекты с прозрачностью в html

По умолчанию блок частично прозрачный. При наведении курсора мыши блок становится ярким. Такие эффекты зачастую используются в дизайне сайтов.

На странице преобразуется в следующее

Пример №3. Прозрачный блок на изображении в html

Ниже приведен пример полупрозрачного блока, который частично закрыл изображение. Блок специально накрывает изображение не полностью с целью показать, как он выглядит на пустом фоне.

На странице преобразуется в следующее

Примечание
Internet Explorer до версии 9.0 для изменения прозрачности использует фильтры, для этого браузера следует записать filter: alpha(opacity=50), где параметр opacity может принимать значение от 0 до 100.

Для обращения к opacity из JavaScript нужно писать следующую конструкцию:

object.style.opacity ="VALUE "

Задача

Сделать блочный элемент со всем его содержимым полупрозрачным.

Решение

Для изменения степени прозрачности элемента применяется стилевое свойство opacity со значением от 0 до 1, где 0 соответствует полной прозрачности, а 1, наоборот, непрозрачности объекта. В браузере Internet Explorer это свойство не работает, поэтому специально для него приходится использовать filter , свойство, не входящее в спецификацию CSS. В примере 1 показано, как установить прозрачность слоя для всех браузеров.

Пример 1. Полупрозрачный слой

HTML5 CSS 2.1 IE Cr Op Sa Fx

Результат данного примера показан на рис. 1.

Рис. 1. Полупрозрачный слой в браузере Safari

Свойство filter добавляет прозрачность только для тех элементов, где установлен хотя бы один из размеров (width или height ) или для элемента задано абсолютное позиционирование (position : absolute ).

Также учтите, что прозрачность действует на всё содержимое слоя, включая дочерние элементы, и увеличить для них уровень непрозрачности за счет варьирования opacity не получится. В примере 1, где прозрачность слоя установлена как 0.7 , текст внутри слоя получает такое же значение. Его допустимо установить меньше, но превысить значение прозрачности 0.7 текст уже не может.

CSS-свойство opacity устанавливает непрозрачность элемента. Непрозрачность - это степень, в которой содержимое скрывается за элементом, является противоположностью прозрачности.

The source for this interactive example is stored in a GitHub repository. If you"d like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

opacity применяется к элементу в целом, включая его содержимое, даже если значение не наследуется дочерними элементами. Таким образом, элемент и его потомки имеют одинаковую непрозрачность относительно фона элемента, даже если они имеют различную непрозрачность относительно друг друга.

Использование opacity со значением, отличным от 1 , помещает элемент в новый контекст наложения .

Примеры

Базовый пример

div { background-color: yellow; } .light { opacity: 0.2; /* Едва видимый текст на фоне */ } .medium { opacity: 0.5; /* Видимость текста более четкая на фоне */ } .heavy { opacity: 0.9; /* Видимость текста очень четкая на фоне */ }

Различная непрозрачность с:hover

img.opacity { opacity: 1; filter: alpha(opacity=100); /* IE8 и ниже */ zoom: 1; /* Триггеры "hasLayout" в IE 7 и ниже */ } img.opacity:hover { opacity: 0..png" alt="MDN logo" width="128" height="146" class="opacity">

Проблемы доступности

Если непрозрачность текста регулируется, важно убедиться, что коэффициент контрастности между цветом текста и фоном, на котором размещен текст, достаточно высок, чтобы люди, испытывающие проблемы со слабым зрением, могли читать содержимое страницы.

Коэффициент цветовой контрастности определяется путем сравнения яркости текста с откорректированной непрозрачностью и значением цвета фона. Чтобы соответствовать действующим Рекомендациям по доступности веб-контента (WCAG) , для текстового содержимого требуется соотношение 4.5:1 и 3:1 для более крупного текста, такого как заголовки. Большой текст определяется как 18.66px и или крупнее, или 24px или выше.

Спецификации

Начальное значение	1.0
Применяется к	все элементы
Наследуется	нет
Отображение	визуальный
Обработка значения	указанное значение, обрезается до диапозона
Animation type	интерполируются как вещественные числа с плавающей запятой.">число
Канонический порядок	уникальный неоднозначный порядок, определённый формальной грамматикой

Поддержка браузерами

The compatibility table on this page is generated from structured data. If you"d like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

Update compatibility data on GitHub

	Компьютеры						Мобильные
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome для Android	Firefox для Android	Opera для Android	Safari on iOS	Samsung Internet
opacity	Chrome Полная поддержка 1	Edge Полная поддержка 12	Firefox Полная поддержка 1 Полная поддержка 1 Нет поддержки 1 - 3.5 С префиксом С префиксом Требует вендорный префикс: -moz-	IE Полная поддержка 9	Opera Полная поддержка 9	Safari Полная поддержка 2 Полная поддержка 2 Нет поддержки 1.1 - 2 С префиксом С префиксом Требует вендорный префикс: -khtml-	WebView Android Полная поддержка 1	Chrome Android Полная поддержка 18	Firefox Android Полная поддержка 4	Opera Android Полная поддержка 10.1	Safari iOS Полная поддержка 1	Samsung Internet Android Полная поддержка Да
Support for percentage opacity values	Chrome Полная поддержка 78	Edge Нет поддержки Нет	Firefox Полная поддержка 70	IE Нет поддержки Нет	Opera Нет поддержки Нет	Safari Нет поддержки Нет	WebView Android Полная поддержка 78	Chrome Android Полная поддержка 78	Firefox Android Нет поддержки Нет	Opera Android Нет поддержки Нет	Safari iOS Нет поддержки Нет	Samsung Internet Android Нет поддержки Нет

Легенда

Полная поддержка Полная поддержка Нет поддержки Нет поддержки Требует вендорный префикс или другое имя для использования. Требует вендорный префикс или другое имя для использования.

Описание

Определяет уровень прозрачности элемента веб-страницы. При частичной или полной прозрачности через элемент проступает фоновый рисунок или другие элементы, расположенные ниже полупрозрачного объекта.

Синтаксис

opacity: значение

Значения

В качестве значения выступает число из диапазона . Значение 0 соответствует полной прозрачности элемента, а 1, наоборот — его непрозрачности. Дробные числа вида 0.6 устанавливают полупрозрачность. Допускается писать числа без нуля впереди, вида opacity: .6 .

HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx

Результат данного примера показан на рис. 1.

Рис. 1. Результат использования opacity

Браузеры

Firefox до версии 3.5 поддерживает нестандартное свойство -moz-opacity .

Internet Explorer до версии 9.0 для изменения прозрачности использует фильтры, для этого браузера следует записать filter : alpha(opacity=50) , где параметр opacity может принимать значение от 0 до 100.