diff options
Diffstat (limited to 'files/ru/web/css/opacity')
| -rw-r--r-- | files/ru/web/css/opacity/index.html | 154 |
1 files changed, 154 insertions, 0 deletions
diff --git a/files/ru/web/css/opacity/index.html b/files/ru/web/css/opacity/index.html new file mode 100644 index 0000000000..5d0891baac --- /dev/null +++ b/files/ru/web/css/opacity/index.html @@ -0,0 +1,154 @@ +--- +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> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<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> |