- background-clip¶
- Демо¶
- Синтаксис¶
- Значения¶
- Спецификации¶
- Поддержка браузерами¶
- Описание и примеры¶
- Примечание¶
- background-clip
- Try it
- Syntax
- Values
- Accessibility concerns
- Formal definition
- Formal syntax
- Examples
- HTML
- CSS
- Result
- Specifications
- Browser compatibility
- See also
- Found a content problem with this page?
- MDN
- Support
- Our communities
- Developers
- background-clip
- Краткая информация
- Синтаксис
- Значения
- Песочница
- Пример
- Объектная модель
- Примечание
- Спецификация
- Браузеры
- См. также
- background-clip
- Syntax
- Values
- Formal syntax
- Examples
- HTML
- CSS
- Result
- Specifications
- Browser compatibility
- See also
background-clip¶
Свойство background-clip определяет, как цвет фона или фоновая картинка должна выводиться под границами.
Эффект заметен при прозрачных или пунктирных границах.
Демо¶
- background
- background-attachment
- background-blend-mode
- background-clip
- background-color
- background-image
- background-origin
- background-position
- background-position-x
- background-position-y
- background-repeat
- background-size
Синтаксис¶
/* Keyword values */ background-clip: border-box; background-clip: padding-box; background-clip: content-box; background-clip: text; /* Global values */ background-clip: inherit; background-clip: initial; background-clip: unset; Значения¶
padding-box Фон отображается внутри границ. border-box Фон выводится под границами. content-box Фон отображается только внутри контента. text Фон отображается только внутри текста.
Значений может быть несколько (для каждого из множественных фоновых рисунков), при этом значения разделяются между собой запятой.
Результат использования значений свойства background-clip для элемента с пунктирной рамкой толщиной 10 пикселей показан на рис. 1.
Применяется ко всем элементам
Спецификации¶
Поддержка браузерами¶
Can I Use background-img-opts? Data on support for the background-img-opts feature across the major browsers from caniuse.com.
Описание и примеры¶
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
html> head> meta charset="utf-8" /> title>background-cliptitle> style> .example background: #5f392f url(/example/image/gear.png); /* Фоновый рисунок */ border: 10px dotted red; /* Параметры рамки */ background-clip: border-box; /* Фон под рамкой */ padding: 10px; /* Поля */ color: #fff; /* Цвет текста */ min-height: 48px; /* Минимальная высота */ > style> head> body> div class="example">Содержимое страницыdiv> body> html> Примечание¶
- Firefox до версии 4 поддерживает свойство -moz-background-clip и значения padding и border .
- В Chrome, Safari, Opera и Android значение text работает только со свойством -webkit-background-clip .
background-clip
The background-clip CSS property sets whether an element’s background extends underneath its border box, padding box, or content box.
Try it
If the element has no background-image or background-color , this property will only have a visual effect when the border has transparent regions or partially opaque regions (due to border-style or border-image ); otherwise, the border masks the difference.
Note: Because the root element has a different background painting area, the background-clip property has no effect when specified on it. See «The backgrounds of special elements.»
Syntax
/* Keyword values */ background-clip: border-box; background-clip: padding-box; background-clip: content-box; background-clip: text; /* Global values */ background-clip: inherit; background-clip: initial; background-clip: revert; background-clip: revert-layer; background-clip: unset;
Values
The background extends to the outside edge of the border (but underneath the border in z-ordering).
The background extends to the outside edge of the padding. No background is drawn beneath the border.
The background is painted within (clipped to) the content box.
The background is painted within (clipped to) the foreground text.
Accessibility concerns
When using background-clip: text check that the contrast ratio between the background color and the color of the text placed over it is high enough that people experiencing low vision conditions will be able to read the content of the page.
If the background image does not load, this could also lead to the text becoming unreadable. Add a fallback background-color to prevent this from happening, and test without the image.
Consider using feature queries with @supports to test for support of background-clip: text and provide an accessible alternative where it is not supported.
Formal definition
| Initial value | border-box |
|---|---|
| Applies to | all elements. It also applies to ::first-letter and ::first-line . |
| Inherited | no |
| Computed value | as specified |
| Animation type | a repeatable list of |
Formal syntax
background-clip =
#
=
border-box |
padding-box |
content-box
Examples
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: 0.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; -webkit-background-clip: text; color: rgba(0, 0, 0, 0.2); > Result
Specifications
Browser compatibility
BCD tables only load in the browser
See also
- The clip-path property creates a clipping region that defines what part of an entire element should be displayed.
- Background properties: background , background-color , background-image , background-origin
- Introduction to the CSS box model
Found a content problem with this page?
This page was last modified on Jul 18, 2023 by MDN contributors.
Your blueprint for a better internet.
MDN
Support
Our communities
Developers
Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.
background-clip
Определяет, как цвет фона или фоновая картинка должна выводиться под границами. Эффект заметен при прозрачных или пунктирных границах.
Краткая информация
Синтаксис
background-clip: [padding-box | border-box | content-box | text]#Синтаксис
| Описание | Пример | |
|---|---|---|
| Указывает тип значения. | ||
| A && B | Значения должны выводиться в указанном порядке. | && |
| A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
| A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
| [ ] | Группирует значения. | [ crop || cross ] |
| * | Повторять ноль или больше раз. | [,]* |
| + | Повторять один или больше раз. | + |
| ? | Указанный тип, слово или группа не является обязательным. | inset? |
| Повторять не менее A, но не более B раз. | ||
| # | Повторять один или больше раз через запятую. | # |
Значения
padding-box Фон отображается внутри границ. border-box Фон выводится под границами. content-box Фон отображается только внутри контента. text Фон отображается только внутри текста.
Значений может быть несколько (для каждого из множественных фоновых рисунков), при этом значения разделяются между собой запятой.
Результат использования значений свойства background-clip для элемента с пунктирной рамкой толщиной 10 пикселей показан на рис. 1.
| padding-box | border-box | content-box |
Рис. 1. Результат применения разных значений
Песочница
div < background-image: url(image/shark.jpg); background-size: cover; padding: 20px; border: 5px dashed #c26558; background-clip: >; -webkit-background-clip: > color: transparent >
Пример
Объектная модель
Объект.style.backgroundClip
Примечание
Firefox до версии 4 поддерживает свойство -moz-background-clip и значения padding и border .
В Chrome, Safari, Opera и Android значение text работает только со свойством -webkit-background-clip .
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation ( Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft ( Черновик спецификации ) — первая черновая версия стандарта.
Браузеры
| border-box, padding-box, content-box | 9 | 12 | 4 | 11.5 | 3.1 | 4 |
| text | 4 | 15 | 3.1 | 49 |
| border-box, padding-box, content-box | 2.1 | 4 | 12 | 3.2 |
| text | 2.1 | 49 | 15 | 3.2 |
Браузеры
В таблице браузеров применяются следующие обозначения.
- — элемент полностью поддерживается браузером;
- — элемент браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.
См. также
background-clip
The background-clip CSS property specifies whether an element’s background, whether a or an , extends underneath its border.
/* Keyword values */ background-clip: border-box; background-clip: padding-box; background-clip: content-box; background-clip: text; /* Global values */ background-clip: inherit; background-clip: initial; background-clip: unset;
If the element has no background-image or background-color , this property will only have a visual effect when the border has transparent regions or partially opaque regions (due to border-style or border-image ); otherwise, the border masks the difference.
| Initial value | border-box |
|---|---|
| Applies to | all elements. It also applies to ::first-letter and ::first-line . |
| Inherited | no |
| Media | visual |
| Computed value | as specified |
| Animation type | discrete |
| Canonical order | the unique non-ambiguous order defined by the formal grammar |
Syntax
Values
border-box The background extends to the outside edge of the border (but underneath the border in z-ordering). padding-box The background extends to the outside edge of the padding. No background is drawn beneath the border. content-box The background is painted within (clipped to) the content box. text The background is painted within (clipped to) the foreground text.
Formal syntax
#where
= border-box | padding-box | content-box
Examples
HTML
The background extends behind the border.
The background extends to the inside edge of the border.
The background extends only to the edge of the content box.
The background is clipped to the foreground text.
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.3em sans-serif; text-decoration: underline; >.border-box < background-clip: border-box; >.padding-box < background-clip: padding-box; >.content-box < background-clip: content-box; >.text
Result
Specifications
| Specification | Status | Comment |
|---|---|---|
| CSS Backgrounds and Borders Module Level 3 The definition of ‘background-clip’ in that specification. | Candidate Recommendation | Initial definition. |
| CSS Backgrounds and Borders Module Level 4 The definition of ‘background-clip’ in that specification. | Editor’s Draft | Add text value. |
Browser compatibility
The compatibility table in this page is generated from structured data. If you’d like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
| Feature | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| Basic Support | 1.0 1 | 12 | 4.0 2 | 9.0 3 | 10.5 | 3.0 1 |
| content-box | 1.0 | 12 | 4.0 4 | 9.0 5 | 10.5 | 3.0 |
| text | (Yes) 6 | No | 49.0 7 | No | (Yes) 6 | (Yes) 6 |
| Feature | Android | Chrome for Android | Edge mobile | Firefox for Android | IE mobile | Opera Android | iOS Safari |
|---|---|---|---|---|---|---|---|
| Basic Support | 4.1 | (Yes) | (Yes) | 14.0 | 7.1 | 12.1 | (Yes) |
| content-box | 4.1 | (Yes) | (Yes) | 14.0 | 7.1 | 12.1 | (Yes) |
| text | ? | ? | (Yes) | 49.0 7 | No | (Yes) 6 | (Yes) 6 |
1. Webkit also supports the prefixed version of this property, and in that case, in addition to the current keywords, the alternative synonyms are: padding , border , and content .
2. Gecko supported, from version 1.1 to version 1.9.2, corresponding to Firefox 1.0 to 3.6 included, a different and prefixed syntax: -moz-background-clip: padding | border .
3. In IE 7 and IE 8 of Internet Explorer, this property always behaved like background-clip: padding when overflow was hidden , auto , or scroll .
4. Gecko supported, from version 1.1 to version 1.9.2, which corresponds to Firefox 1.0 to 3.6 included, a different and prefixed syntax: -moz-background-clip: padding | border .
5. In IE 7 and IE 9 of Internet Explorer, it always behaved like background-clip: padding if overflow: hidden | auto | scroll
6. Support the prefixed version of the property only; according to the official blog, WebKit does not include text decorations or shadows in the clipping.
7. In Firefox 48, it was not activated by default and its support could be activated by setting layout.css.background-clip-text.enabled pref to true .
See also
- The clip-path property creates a clipping region that defines what part of an entire element should be displayed.
- Background properties: background , background-color , background-image
- Introduction to the CSS box model