opacity
=======

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

Интерактивный пример
--------------------

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

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

Если вы не хотите применять opacity к дочерним элементам, используйте взамен свойство `background`. Например:


```css
background: rgba(0, 0, 0, 0.4);
```

Синтаксис
---------

### Значения

`<alpha-value>`

`число` в пределах от `0.0` до `1.0`, включительно, или `проценты` в пределах от `0%` до `100%`, включительно, представляет непрозрачность канала (т.е. значение его альфа-канала). Любое значение вне интервала, хотя и является валидным, округляется до ближайшего предела в диапазоне.

| Значение | Действие |
| --- | --- |
| `0` | Элемент полностью прозрачен (он становится невидимым). |
| Любое `число` строго между `0` и `1` | Элемент полупрозрачный (т.е. содержимое элемента можно увидеть). |
| `1` (значение по умолчанию) | Элемент полностью непрозрачный (видимый). |

### Формальный синтаксис
```

opacity =   
  <alpha-value>    
  
<alpha-value> =   
  <number>      | (en-US)  
  <percentage>    
  
```

Примеры
-------

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


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



```html
<div class="light">You can barely see this.</div>
<div class="medium">This is easier to see.</div>
<div class="heavy">This is very easy to see.</div>
```

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


```css
img.opacity {
  opacity: 1;
  filter: alpha(opacity=100); /\* IE8 и ниже \*/
  zoom: 1; /\* Триггеры "hasLayout" в IE 7 и ниже \*/
}

img.opacity:hover {
  opacity: 0.5;
  filter: alpha(opacity=50);
  zoom: 1;
}
```



```html
<img
 src="https://developer.mozilla.org/mdn-social-share.png"
 alt="MDN logo"
 width="128"
 height="146"
 class="opacity" />
```

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

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

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

* WebAIM: Color Contrast Checker
* MDN Understanding WCAG, Guideline 1.4 explanations (en-US)
* Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0
Спецификации
------------

| Specification |
| --- |
| CSS Color Module Level 4 # transparency |

|  |  |
| --- | --- |
| Начальное значение | `1` |
| Применяется к | все элементы |
| Наследуется | нет |
| Проценты | map to the range `[0,1]` |
| Обработка значения | Тоже, что и указанное значение, после обрезки `number` до диапозона [0.0, 1.0]. |
| Animation type | by computed value type |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

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

* Microsoft's filter:alpha(opacity=xx)