--- 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><alpha-value></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"><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> </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"><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"> </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>