From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/ru/web/css/opacity/index.html | 154 ++++++++++++++++++++++++++++++++++++ 1 file changed, 154 insertions(+) create mode 100644 files/ru/web/css/opacity/index.html (limited to 'files/ru/web/css/opacity/index.html') 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 +--- +
{{CSSRef}}
+ +

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

+ +
{{EmbedInteractiveExample("pages/css/opacity.html")}}
+ + + +

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

+ +

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

+ +

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

+ +
background: rgba(0, 0, 0, 0.4);
+ +

Синтаксис

+ +

Значения

+ +
+
<alpha-value>
+
{{cssxref("number", "число")}} в пределах от 0.0 до 1.0, включительно, или {{cssxref("percentage", "проценты")}} в пределах от 0% до 100%, включительно, представляет непрозрачность канала (т.е. значение его альфа-канала). Любое значение вне интервала, хотя и является валидным, округляется до ближайшего предела в диапазоне. + + + + + + + + + + + + + + + + + + + +
ЗначениеДействие
0Элемент полностью прозрачен (он становится невидимым).
Любое {{cssxref("number", "число")}} строго между 0 и 1Элемент полупрозрачный (т.е. содержимое элемента можно увидеть).
1 (значение по умолчанию)Элемент полностью непрозрачный (видимый).
+
+
+ +

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

+ +
{{csssyntax}}
+ +

Примеры

+ +

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

+ +
div { background-color: yellow; }
+.light {
+  opacity: 0.2; /* Едва видимый текст на фоне */
+}
+.medium {
+  opacity: 0.5; /* Видимость текста более четкая на фоне */
+}
+.heavy {
+  opacity: 0.9; /* Видимость текста очень четкая на фоне */
+}
+
+ +
<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>
+
+ +

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

+ +

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

+ +
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;
+}
+ +
<img src="//developer.mozilla.org/static/img/opengraph-logo.png"
+  alt="MDN logo" width="128" height="146"
+  class="opacity">
+
+ +

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

+ +

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

+ +

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

+ +

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

+ + + +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('CSS3 Transitions', '#animatable-css', 'opacity')}}{{Spec2('CSS3 Transitions')}}Определяет opacity как анимированную.
{{SpecName('CSS3 Colors', '#opacity', 'opacity')}}{{Spec2('CSS3 Colors')}}Первоначальное определение
+ +

{{cssinfo}}

+ +

Поддержка браузерами

+ + + +

{{Compat("css.properties.opacity")}}

+ +

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

+ + -- cgit v1.2.3-54-g00ecf