1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
|
---
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>
{{Specifications}}
<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>
|
