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/background-clip/index.html | 118 ++++++++++++++++++++++++++++ 1 file changed, 118 insertions(+) create mode 100644 files/ru/web/css/background-clip/index.html (limited to 'files/ru/web/css/background-clip') diff --git a/files/ru/web/css/background-clip/index.html b/files/ru/web/css/background-clip/index.html new file mode 100644 index 0000000000..213ea5d62d --- /dev/null +++ b/files/ru/web/css/background-clip/index.html @@ -0,0 +1,118 @@ +--- +title: background-clip +slug: Web/CSS/background-clip +translation_of: Web/CSS/background-clip +--- +
{{CSSRef}}
+ +

Описание

+ +

Свойство CSS background-clip определяет как цвет фона или фоновое изображение будут выводиться под границами блока.

+ +

Если фоновое изображение или цвет не заданы, это свойство будет иметь визуальный эффект, только если у границы есть прозрачные области или частично непрозрачные области (из-за {{cssxref("border-style")}} или {{cssxref("border-image")}}); в противном случае граница скрывает разницу.

+ +

Синтаксис

+ +
/* Значения ключевых слов */
+background-clip: border-box;
+background-clip: padding-box;
+background-clip: content-box;
+background-clip: text;
+
+/* Глобальные значения */
+background-clip: inherit;
+background-clip: initial;
+background-clip: unset;
+ +

Значения

+ +
+
border-box
+
Фон распространяется до внешнего края границы (но под границей в z-порядке).
+
padding-box
+
Фон распространяется до внешнего края отступа. Под границей фон не рисуется.
+
content-box
+
Фон закрашивается внутри (обрезается) поля содержимого.
+
text {{experimental_inline}}
+
Фон закрашивается внутри (обрезается) текста переднего плана.
+
+ +

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

+ +
{{csssyntax}}
+ +

Примеры

+ +

HTML

+ +
<p class="border-box">The background extends behind the border.</p>
+<p class="padding-box">The background extends to the inside edge of the border.</p>
+<p class="content-box">The background extends only to the edge of the content box.</p>
+<p class="text">The background is clipped to the foreground text.</p>
+ +

CSS

+ +
p {
+  border: .8em darkviolet;
+  border-style: dotted double;
+  margin: 1em 0;
+  padding: 1.4em;
+  background: linear-gradient(60deg, red, yellow, red, yellow, red);
+  font: 900 1.2em sans-serif;
+  text-decoration: underline;
+}
+
+.border-box { background-clip: border-box; }
+.padding-box { background-clip: padding-box; }
+.content-box { background-clip: content-box; }
+
+.text {
+  background-clip: text;
+  color: rgba(0,0,0,.2);
+}
+ +

Результат

+ +

{{EmbedLiveSample('Example', 600, 580)}}

+ +

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

+ + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('CSS3 Backgrounds', '#the-background-clip', 'background-clip')}}{{Spec2('CSS3 Backgrounds')}}Первоначальное определение.
{{SpecName('CSS4 Backgrounds', '#background-clip', 'background-clip')}}{{Spec2('CSS4 Backgrounds')}}Добавляет значение text.
+ +

{{cssinfo}}

+ +

Совместимость с браузерами

+ + + +

{{Compat("css.properties.background-clip")}}

+ +

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

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