---
title: opacity
slug: Web/CSS/opacity
tags:
  - CSS
  - CSS свойство
  - Opacity
  - Непрозрачность
  - Прозрачность
translation_of: Web/CSS/opacity
---
<div>{{CSSRef}}</div>

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

<div>{{EmbedInteractiveExample("pages/css/opacity.html")}}</div>



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

<p>Использование <code>opacity</code> со значением, отличным от <code>1</code>, помещает элемент в новый <a href="/en-US/docs/CSS/Understanding_z-index/The_stacking_context">контекст наложения</a>.</p>

<p>Если вы  <a href="http://stackoverflow.com/questions/13508877/resetting-the-opacity-of-a-child-elements-maple-browser-samsung-tv-app">не хотите применять opacity к дочерним элементам</a>, используйте взамен свойство {{cssxref("background")}}. Например:</p>

<pre class="brush:css">background: rgba(0, 0, 0, 0.4);</pre>

<h2 id="Синтаксис">Синтаксис</h2>

<h3 id="Значения">Значения</h3>

<dl>
 <dt><code>&lt;alpha-value&gt;</code></dt>
 <dd>{{cssxref("number", "число")}} в пределах от <code>0.0</code> до <code>1.0</code>, включительно, или {{cssxref("percentage", "проценты")}} в пределах от <code>0%</code> до <code>100%</code>, включительно, представляет непрозрачность канала (т.е. значение его альфа-канала). Любое значение вне интервала, хотя и является валидным, округляется до ближайшего предела в диапазоне.
 <table class="standard-table">
  <tbody>
   <tr>
    <th>Значение</th>
    <th>Действие</th>
   </tr>
   <tr>
    <td><code>0</code></td>
    <td>Элемент полностью прозрачен (он становится невидимым).</td>
   </tr>
   <tr>
    <td>Любое {{cssxref("number", "число")}} строго между <code>0</code> и <code>1</code></td>
    <td>Элемент полупрозрачный (т.е. содержимое элемента можно увидеть).</td>
   </tr>
   <tr>
    <td><code>1</code> (значение по умолчанию)</td>
    <td>Элемент полностью непрозрачный (видимый).</td>
   </tr>
  </tbody>
 </table>
 </dd>
</dl>

<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>

{{csssyntax}}

<h2 id="Примеры">Примеры</h2>

<h3 id="Базовый_пример">Базовый пример</h3>

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

<pre class="brush: html">&lt;div class="light"&gt;You can barely see this.&lt;/div&gt;
&lt;div class="medium"&gt;This is easier to see.&lt;/div&gt;
&lt;div class="heavy"&gt;This is very easy to see.&lt;/div&gt;
</pre>

<p>{{EmbedLiveSample('Базовый_пример', '640', '64')}}</p>

<h3 id="Различная_непрозрачность_с_hover">Различная непрозрачность с <code>:hover</code></h3>

<pre class="brush: 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;
}</pre>

<pre class="brush: html">&lt;img src="<a href="https://developer.mozilla.org/static/img/opengraph-logo.png">//developer.mozilla.org/static/img/opengraph-logo.png</a>"
  alt="MDN logo" width="128" height="146"
  class="opacity"&gt;
</pre>

<p>{{EmbedLiveSample('Различная_непрозрачность_с_hover', '150', '175')}}</p>

<h2 id="Проблемы_доступности">Проблемы доступности</h2>

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

<p>Коэффициент цветовой контрастности определяется путём сравнения яркости текста с откорректированной непрозрачностью и значением цвета фона. Чтобы соответствовать действующим <a href="https://www.w3.org/WAI/intro/wcag">Рекомендациям по доступности веб-контента (WCAG)</a>, для текстового содержимого требуется соотношение 4.5:1 и 3:1 для более крупного текста, такого как заголовки. Большой текст определяется как 18.66px и <a href="https://developer.mozilla.org/ru/docs/Web/CSS/font-weight">жирный</a> или крупнее, или 24px или выше.</p>

<ul>
 <li><a href="https://webaim.org/resources/contrastchecker/">WebAIM: Color Contrast Checker</a></li>
 <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li>
 <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html">Understanding Success Criterion 1.4.3  | W3C Understanding WCAG 2.0</a></li>
</ul>

<h2 id="Спецификации">Спецификации</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Спецификация</th>
   <th scope="col">Статус</th>
   <th scope="col">Комментарий</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'opacity')}}</td>
   <td>{{Spec2('CSS3 Transitions')}}</td>
   <td>Определяет <code>opacity</code> как анимированную.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Colors', '#opacity', 'opacity')}}</td>
   <td>{{Spec2('CSS3 Colors')}}</td>
   <td>Первоначальное определение</td>
  </tr>
 </tbody>
</table>

<p>{{cssinfo}}</p>

<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>



<p>{{Compat("css.properties.opacity")}}</p>

<h2 id="Смотрите_также">Смотрите также</h2>

<ul>
 <li><a href="http://msdn.microsoft.com/en-us/library/ms532910%28VS.85%29.aspx">Microsoft's filter:alpha(opacity=xx)</a></li>
</ul>