Свойство background-clip
Свойство background-clip задает как фоновая заливка или фоновая картинка будет размещаться относительно элемента: часть фона будет залазить под границу, фон не будет залазить под границу или фон будет размещаться только над содержимым элемента (то есть padding отодвинет фон).
Синтаксис
Значения
| Значение | Описание |
|---|---|
| border-box | Фон залезет под границу. |
| padding-box | Фон не будет залезать под границу. |
| content-box | Фон будет только над содержимым. |
Значение по умолчанию: border-box .
Пример . Значение padding-box, картинка
В данном случае фон не зайдет под границу:
Пример . Значение border-box, картинка
Сейчас фон зайдет под границу:
Пример . Значение content-box
А теперь та часть фона, которая находится под padding , будет обрезана:
Пример . Значение padding-box, заливка
Сейчас фоновый цвет не зайдет под границу:
Пример . Значение border-box, заливка
А теперь фоновый цвет зайдет под границу:
Пример . Значение content-box, background-color
А теперь фоновая заливка будет отодвинута padding :
Смотрите также
- свойство background ,
представляющее собой свойство-сокращение для фона
background — clip
Решаем, должен ли фон заполнять площадь всего элемента или не выходить за рамки контентной области.
Время чтения: меньше 5 мин
Это незавершённая статья. Вы можете помочь её закончить! Почитайте о том, как контрибьютить в Доку.
Открыть/закрыть навигацию по статье
Обновлено 14 сентября 2021
Кратко
Скопировать ссылку «Кратко» Скопировано
Свойство background — clip определяет, в каких областях будет находиться фоновая картинка и фоновый цвет блока.
Как пишется
Скопировать ссылку «Как пишется» Скопировано
- border — box — фон занимает все области, в том числе под рамками (значение по умолчанию).
- padding — box — фон занимает область контента и внутреннего отступа, но не заходит под рамку. Наглядно видно при прозрачных или прерывистых рамках.
- content — box — фон заполняет только контентную область, но не заходит во внутренний отступ и под рамку.
- text — фон заполняет текст в блоке, работает только если указано color : transparent .
Читайте также
background — color
Блочная модель
border
Светлая Авто Тёмная
В рассылке приходят тематические подборки, советы, авторские и партнёрские колонки
✅ Подписка на адрес оформлена! Проверьте входящие: мы прислали ссылку на страницу, где можно настроить рассылку или отписаться.
❌ Что-то пошло не так! Подписка на адрес не оформлена. Пожалуйста, попробуйте ещё раз.
background-clip
Определяет, как цвет фона или фоновая картинка должна выводиться под границами. Эффект заметен при прозрачных или пунктирных границах.
Краткая информация
| Значение по умолчанию | border-box |
|---|---|
| Наследуется | Нет |
| Применяется | Ко всем элементам |
| Анимируется | Нет |
Синтаксис
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. Результат применения разных значений
Песочница
padding-box border-box content-box text
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 .
Спецификация
| Спецификация | Статус |
|---|---|
| CSS Backgrounds and Borders Module Level 3 | Возможная рекомендация |
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- 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
- background-attachment
- background-image
- background-origin
- background-position
- background-repeat
- background-size
- Свойство border
Рецепты
Справочник CSS
- !important
- ::after
- ::backdrop
- ::before
- ::first-letter
- ::first-line
- ::marker
- ::placeholder
- ::selection
- :active
- :blank
- :buffering
- :checked
- :default
- :dir
- :disabled
- :empty
- :enabled
- :first-child
- :first-of-type
- :focus
- :focus-within
- :fullscreen
- :hover
- :in-range
- :indeterminate
- :invalid
- :is()
- :lang()
- :last-child
- :last-of-type
- :link
- :muted
- :not()
- :nth-child()
- :nth-last-child()
- :nth-last-of-type()
- :nth-of-type()
- :only-child
- :only-of-type
- :optional
- :out-of-range
- :paused
- :placeholder-shown
- :playing
- :read-only
- :read-write
- :required
- :root
- :seeking
- :stalled
- :target
- :valid
- :visited
- :volume-locked
- @charset
- @document
- @font-face
- @import
- @keyframes
- @media
- @page
- @supports
- @viewport
- accent-color
- align-content
- align-items
- align-self
- all
- animation
- animation-delay
- animation-direction
- animation-duration
- animation-fill-mode
- animation-iteration-count
- animation-name
- animation-play-state
- animation-timing-function
- aspect-ratio
- backdrop-filter
- backface-visibility
- 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
- block-size
- border
- border-bottom
- border-bottom-color
- border-bottom-left-radius
- border-bottom-right-radius
- border-bottom-style
- border-bottom-width
- border-collapse
- border-color
- border-image
- border-left
- border-left-color
- border-left-style
- border-left-width
- border-radius
- border-right
- border-right-color
- border-right-style
- border-right-width
- border-spacing
- border-style
- border-top
- border-top-color
- border-top-left-radius
- border-top-right-radius
- border-top-style
- border-top-width
- border-width
- bottom
- box-decoration-break
- box-shadow
- box-sizing
- caption-side
- caret-color
- clear
- clip
- color
- column-count
- column-fill
- column-gap
- column-rule
- column-rule-color
- column-rule-style
- column-rule-width
- column-span
- column-width
- columns
- content
- counter-increment
- counter-reset
- cursor
- direction
- display
- empty-cells
- filter
- flex
- flex-basis
- flex-direction
- flex-flow
- flex-grow
- flex-shrink
- flex-wrap
- float
- font
- font-family
- font-kerning
- font-size
- font-stretch
- font-style
- font-variant
- font-weight
- gap
- height
- hyphenate-character
- hyphenate-limit-chars
- hyphens
- image-rendering
- justify-content
- left
- letter-spacing
- line-clamp
- line-height
- list-style
- list-style-image
- list-style-position
- list-style-type
- margin
- margin-bottom
- margin-left
- margin-right
- margin-top
- marks
- max-height
- max-width
- min-height
- min-width
- mix-blend-mode
- object-fit
- opacity
- order
- orphans
- outline
- outline-color
- outline-offset
- outline-style
- outline-width
- overflow
- overflow-x
- overflow-y
- padding
- padding-block
- padding-block-end
- padding-block-start
- padding-bottom
- padding-inline
- padding-inline-end
- padding-inline-start
- padding-left
- padding-right
- padding-top
- page-break-after
- page-break-before
- page-break-inside
- perspective
- perspective-origin
- place-content
- pointer-events
- position
- quotes
- resize
- right
- row-gap
- scroll-behavior
- tab-size
- table-layout
- text-align
- text-align-last
- text-decoration
- text-decoration-color
- text-decoration-line
- text-decoration-skip-ink
- text-decoration-style
- text-emphasis
- text-emphasis-color
- text-emphasis-position
- text-emphasis-style
- text-fill-color
- text-indent
- text-orientation
- text-overflow
- text-shadow
- text-stroke
- text-stroke-color
- text-stroke-width
- text-transform
- top
- transform
- transform-origin
- transform-style
- transition
- transition-delay
- transition-duration
- transition-property
- transition-timing-function
- unicode-bidi
- user-select
- vertical-align
- visibility
- white-space
- widows
- width
- word-break
- word-spacing
- word-wrap
- writing-mode
- z-index
- zoom
CSS свойство background-clip
Свойство background-clip определяет, как background-color и background-image должны выводиться под границами элемента. Если элемент не имеет background-image или background-color , свойство будет иметь визуальный эффект только в случае, если граница имеет прозрачные области или частично непрозрачные области. В противном случае граница показывает разницу.
| Значение по умолчанию | border-box |
| Применяется | Ко всем элементам, а также к ::first-letter и ::first-line. |
| Наследуется | Нет |
| Анимируемое | Нет |
| Версия | CSS3 |
| DOM синтаксис | object.style.backgroundClip = «content-box»; |
Синтаксис
background-clip: border-box | padding-box | content-box | text | initial | inherit;
Пример
html> html> head> title>Заголовок документа title> style> #example< border: 3px solid #666; padding: 15px; background: #ccc; background-clip: content-box; > style> head> body> h2>Пример свойства background-clip h2> p>Здесь использовано значение "content-box". p> div id="example"> p>Фон отображается только внутри контента. p> div> body> html>В следующем примере можно увидеть разницу между значениями «padding-box» и «border-box»:
Пример
html> html> head> title>Заголовок документа title> style> #example1 < border: 5px dashed #666; padding: 15px; background: #1c87c9; background-clip: border-box; > #example2 < border: 5px dashed #666; padding: 15px; background: #1c87c9; background-clip: padding-box; > style> head> body> h2>Пример свойства background-clip h2> p>Здесь установлено значение "border-box" (Значение по умолчанию). p> div id="example1"> p>Фон расширяется за пределы границы. p> div> p>Здесь установлено значение "padding-box". p> div id="example2"> p>Фон расширяется в пределах внутреннего края границы. p> div> div> body> html>В данном примере фон отображается в пределах текста переднего плана:
Пример
html> html> head> title>Заголовок документа title> style> #example < border: 3px dashed #1ebf42; padding: 15px; background: #1c87c9; background-clip: text; -webkit-background-clip: text; color: transparent; > style> head> body> h2>Пример свойства background-clip h2> p>Здесь установлено значение"text" p> div id="example"> p>Фон отображается в пределах текста переднего плана. p> div> body> html>Значения
| Значение | Описание |
|---|---|
| border-box | Фон выводится под границами. Значение по умолчанию. |
| padding-box | Фон отображается в пределах внутреннего края границы. |
| content-box | Фон отображается внутри контента . |
| text | Фон отображается в пределах текста переднего плана. |
| initial | Устанавливает свойство в значение по умолчанию. |
| inherit | Значение элемента наследуется от родительского элемента. |
Поддержка браузера
| 15.0+ | 4.0+ 3.6 -moz- |
7.0+ | 11.5+ 10.1 -o- |