Background clip css что это

background-clip: [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

Свойство 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

Определяет, как цвет фона или фоновая картинка должна выводиться под границами. Эффект заметен при прозрачных или пунктирных границах.

Синтаксис

background-clip: [padding-box | border-box | content-box] [, [padding-box | border-box | content-box]]

Значения

padding-box Фон отображается внутри границ. border-box Фон выводится под границами. content-box Фон отображается только внутри контента.

Значений может быть несколько (для каждого из множественных фоновых рисунков), при этом значения разделяются между собой запятой.

Результат использования значений свойства background-clip для элемента с пунктирной рамкой толщиной 10 пикселов показан на рис. 1.

padding-box	border-box	content-box

Рис. 1. Результат применения разных значений

HTML5 CSS2.1 CSS IE Cr Op Sa Fx

Браузеры

В IE7 фон по умолчанию выводится как при значении padding-box .

Safari понимает только нестандартное свойство -webkit-background-clip , также с ним работает и Chrome.

Opera до версии 12.0 не поддерживает значение content-box .

Firefox до версии 4.0 поддерживает нестандартное свойство -moz-background-clip .

CSS по теме

Свойство -webkit-background-clip

Свойство -webkit-background-clip определяет, будет ли цвет фона ограничиваться началом границы элемента, будет продолжаться до внешнего края границы, ограничиваться контентом или же охватывать только текст элемента.

Допустимые значения

• padding — цвет фона будет ограничиваться началом границы элемента
• border — цвет фона будет продолжаться под прозрачными участками границы элемента
• content — цвет фона распространяется только на контентную часть элемента
• text — фоновый цвет будет распространен только на текст элемента (Safari 4.0 и выше, Chrome 3.0 и выше)

• Safari 4.0 и выше
• Chrome 3.0 и выше

Пример

div <
background-color:#ccc;
-webkit-background-image:-webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)))
-webkit-background-clip: border;
>

По теме

• Вендорные префиксы. Что это?
• img vs background-image
• Градиент: CSS3 против CSS2 + картинка
• Масштабируемый фон
• Спрайты: меньше картинок, больше скорость
• Центрирование картинки в блоке
• Свойство background-clip
• Свойство -moz-background-clip
• Свойство -webkit-background-clip
• Свойство background-origin
• Свойство -moz-background-origin
• Свойство -webkit-background-origin
• Свойство background-size
• Свойство -moz-background-size
• Свойство -webkit-background-size
• Свойство -webkit-background-composite

Статьи этого раздела

• CSS свойство -webkit-animation | назначение, допустимые значения, примеры
• CSS свойство -webkit-animation-delay | назначение, допустимые значения, примеры
• CSS свойство -webkit-animation-direction | назначение, допустимые значения, примеры
• CSS свойство -webkit-animation-duration | назначение, допустимые значения, примеры
• CSS свойство -webkit-animation-fill-mode | назначение, допустимые значения, примеры
• CSS свойство -webkit-animation-iteration-count | назначение, допустимые значения, примеры
• CSS свойство -webkit-animation-name | назначение, допустимые значения, примеры
• CSS свойство -webkit-animation-play-state | назначение, допустимые значения, примеры
• CSS свойство -webkit-backface-visibility | назначение, допустимые значения, примеры
• CSS свойство -webkit-background-clip
• CSS свойство -webkit-background-composite | назначение, допустимые значения, примеры
• CSS свойство -webkit-background-origin | назначение, допустимые значения, примеры
• CSS свойство -webkit-background-size | назначение, допустимые значения, примеры
• CSS свойство -webkit-border-bottom-left-radius | назначение, допустимые значения, примеры
• CSS свойство -webkit-border-bottom-right-radius | назначение, допустимые значения, примеры
• CSS свойство -webkit-border-horizontal-spacing | назначение, допустимые значения, примеры
• CSS свойство -webkit-border-radius | назначение, допустимые значения, примеры
• CSS свойство -webkit-border-top-left-radius | назначение, допустимые значения, примеры
• CSS свойство -webkit-border-top-right-radius | назначение, допустимые значения, примеры
• CSS свойство -webkit-border-vertical-spacing | назначение, допустимые значения, примеры
• CSS свойство -webkit-column-break-after | назначение, допустимые значения, примеры
• CSS свойство -webkit-column-break-before | назначение, допустимые значения, примеры
• CSS свойство -webkit-column-break-inside | назначение, допустимые значения, примеры
• CSS свойство -webkit-column-count | назначение, допустимые значения, примеры
• CSS свойство -webkit-column-gap | назначение, допустимые значения, примеры
• CSS свойство -webkit-column-rule | назначение, допустимые значения, примеры
• CSS свойство -webkit-column-rule-color | назначение, допустимые значения, примеры
• CSS свойство -webkit-column-rule-style | назначение, допустимые значения, примеры
• CSS свойство -webkit-column-rule-width | назначение, допустимые значения, примеры
• CSS свойство -webkit-column-width | назначение, допустимые значения, примеры
• CSS свойство -webkit-columns | назначение, допустимые значения, примеры
• CSS свойство -webkit-line-break | назначение, допустимые значения, примеры
• CSS свойство -webkit-marquee | назначение, допустимые значения, примеры
• CSS свойство -webkit-marquee-direction | назначение, допустимые значения, примеры
• CSS свойство -webkit-marquee-repetition | назначение, допустимые значения, примеры
• CSS свойство -webkit-marquee-speed | назначение, допустимые значения, примеры
• CSS свойство -webkit-marquee-style | назначение, допустимые значения, примеры
• CSS свойство -webkit-mask | назначение, допустимые значения, примеры
• CSS свойство -webkit-mask-attachment | назначение, допустимые значения, примеры
• CSS свойство -webkit-mask-box-image | назначение, допустимые значения, примеры
• CSS свойство -webkit-mask-clip | назначение, допустимые значения, примеры
• CSS свойство -webkit-mask-composite | назначение, допустимые значения, примеры
• CSS свойство -webkit-mask-image
• CSS свойство -webkit-mask-origin | назначение, допустимые значения, примеры
• CSS свойство -webkit-mask-position | назначение, допустимые значения, примеры
• CSS свойство -webkit-mask-position-x | назначение, допустимые значения, примеры
• CSS свойство -webkit-mask-position-y | назначение, допустимые значения, примеры
• CSS свойство -webkit-mask-repeat | назначение, допустимые значения, примеры
• CSS свойство -webkit-mask-size | назначение, допустимые значения, примеры
• CSS свойство -webkit-nbsp-mode | назначение, допустимые значения, примеры
• CSS свойство -webkit-perspective | назначение, допустимые значения, примеры
• CSS свойство -webkit-perspective-origin | назначение, допустимые значения, примеры
• CSS свойство -webkit-rtl-ordering | назначение, допустимые значения, примеры
• CSS свойство -webkit-text-fill-color | назначение, допустимые значения, примеры
• CSS свойство -webkit-text-security | назначение, допустимые значения, примеры
• CSS свойство -webkit-text-stroke | назначение, допустимые значения, примеры
• CSS свойство -webkit-text-stroke-color | назначение, допустимые значения, примеры
• CSS свойство -webkit-text-stroke-width | назначение, допустимые значения, примеры
• CSS свойство -webkit-transform | назначение, допустимые значения, примеры
• CSS свойство -webkit-transform-origin-x | назначение, допустимые значения, примеры
• CSS свойство -webkit-transform-origin-y | назначение, допустимые значения, примеры
• CSS свойство -webkit-transform-origin-z | назначение, допустимые значения, примеры
• CSS свойство -webkit-transform-style | назначение, допустимые значения, примеры
• CSS свойство -webkit-transition-property | назначение, допустимые значения, примеры
• CSS свойство -webkit-user-drag | назначение, допустимые значения, примеры
• CSS свойство -webkit-user-modify | назначение, допустимые значения, примеры
• CSS свойство -webkit-user-select | назначение, допустимые значения, примеры
• Ошибка 404 — Страница не найдена
• Свойство -webkit-animation-timing-function | назначение, допустимые значения, примеры
• Свойство -webkit-appearance | назначение, допустимые значения, примеры
• Свойство -webkit-border-image | назначение, допустимые значения, примеры
• Свойство -webkit-box-align | назначение, допустимые значения, примеры
• Свойство -webkit-box-direction | назначение, допустимые значения, примеры
• Свойство -webkit-box-flex | назначение, допустимые значения, примеры
• Свойство -webkit-box-flex-group | назначение, допустимые значения, примеры
• Свойство -webkit-box-lines | назначение, допустимые значения, примеры
• Свойство -webkit-box-ordinal-group | назначение, допустимые значения, примеры
• Свойство -webkit-box-orient | назначение, допустимые значения, примеры
• Свойство -webkit-box-pack | назначение, допустимые значения, примеры
• Свойство -webkit-box-reflect | назначение, допустимые значения, примеры
• Свойство -webkit-box-shadow | назначение, допустимые значения, примеры
• Свойство -webkit-box-sizing | назначение, допустимые значения, примеры
• Свойство -webkit-margin-bottom-collapse | назначение, допустимые значения, примеры
• Свойство -webkit-margin-collapse | назначение, допустимые значения, примеры
• Свойство -webkit-margin-start | назначение, допустимые значения, примеры
• Свойство -webkit-margin-top-collapse | назначение, допустимые значения, примеры
• Свойство -webkit-padding-start | назначение, допустимые значения, примеры
• Свойство -webkit-transition | назначение, допустимые значения, примеры
• Свойство -webkit-transition-delay | назначение, допустимые значения, примеры
• Свойство -webkit-transition-duration | назначение, допустимые значения, примеры
• Свойство -webkit-transition-timing-function | назначение, допустимые значения, примеры