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

Свойство CSS background-clip определяет, насколько далеко распространяется background-color и background-image внутри элемента, — то есть область отрисовки фона. По умолчанию фон отрисовывается до внешнего края рамки, но background-clip позволяет ограничить его краем отступа, краем содержимого или даже обрезать по форме текста.

На этой странице описывается, что делает каждое значение, когда его применять, в чём отличие background-clip от связанного свойства background-origin, а также приведён рабочий пример для каждого значения.

Если элемент не имеет background-color или background-image, это свойство не оказывает визуального эффекта.

Свойство background-clip относится к свойствам CSS3.

Когда использовать

Вставленные фоны — используйте padding-box или content-box, чтобы полупрозрачная рамка (например, dashed или dotted) показывала страницу позади неё, а не цвет фона элемента.
Текст с градиентом или изображением — сочетайте background-clip: text с ярким background-image и color: transparent, чтобы залить буквы градиентом.
Слоистые карточки — используйте совместно с background-origin, чтобы контролировать, где фоновое изображение начинается (origin) и где обрезается (clip).

Для обрезки фона по тексту в большинстве браузеров также требуется версия с вендорным префиксом (-webkit-background-clip) (см. примечание о значении text ниже).

Начальное значение	border-box
Применяется к	Всем элементам. Также применяется к ::first-letter и ::first-line.
Наследуется	Нет.
Анимируемое	Нет.
Версия	CSS3
DOM-синтаксис	object.style.backgroundClip = "content-box";

Синтаксис

Синтаксис свойства CSS background-clip

background-clip: border-box | padding-box | content-box | text | initial | inherit;

Пример свойства background-clip:

Пример свойства CSS background-clip со значением content-box

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      #example {
        border: 3px solid #666;
        padding: 15px;
        background: #ccc;
        background-clip: content-box;
      }
    </style>
  </head>
  <body>
    <h2>Background-clip property example</h2>
    <p>Here the "content-box" value is used.</p>
    <div id="example">
      <p>The background extends to the edge of the content box.</p>
    </div>
  </body>
</html>

Попробуйте сами »

В следующем примере показано различие между значениями "padding-box" и "border-box".

Пример свойства background-clip со значениями "padding-box" и "border-box":

Пример свойства CSS background-clip со значением border-box

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</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 property example</h2>
    <p>Here the background-clip is set to "border-box" (this is the default value).</p>
    <div id="example1">
      <p>The background extends behind the border.</p>
    </div>
    <p>Here the background-clip is set to "padding-box".</p>
    <div id="example2">
      <p>The background extends to the inside edge of the border.</p>
    </div>
  </body>
</html>

Попробуйте сами »

Значение text обрезает фон так, что он виден только сквозь форму переднепланового текста. Чтобы был виден фон, а не сплошные буквы, задайте color: transparent (или полупрозрачный цвет), чтобы сам текст не перекрывал фон. Это стандартная техника для заголовков с градиентной заливкой.

Поддержка браузерами: значение text по-прежнему требует префикса -webkit-background-clip: text в большинстве браузеров. Всегда объявляйте -webkit-background-clip: text; и background-clip: text; вместе, как показано в примере ниже.

Пример свойства background-clip со значением "text":

Пример свойства CSS background-clip со значением text

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</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 property example</h2>
    <p>Here the background-clip is set to "text"</p>
    <div id="example">
      <p>The background is painted within the foreground text.</p>
    </div>
  </body>
</html>

Попробуйте сами »

background-clip и background-origin

Эти два свойства легко перепутать, так как они используют одни и те же ключевые слова блока (border-box, padding-box, content-box):

background-origin задаёт, где начинается позиционирующая область фонового изображения — опорный блок для background-position и background-size без значения cover.
background-clip задаёт, где нарисованный фон обрезается — всё, что выходит за пределы этого блока, не отображается.

Таким образом, фон может начинаться от края рамки (background-origin: border-box), но обрезаться по краю содержимого (background-clip: content-box), поэтому часть над отступом и рамкой будет скрыта.

Значения

Значение	Описание	Попробовать
border-box	Фон отображается за рамкой. Это значение по умолчанию.	Попробовать »
padding-box	Фон отображается внутри рамки.	Попробовать »
content-box	Фон распространяется до края блока содержимого.	Попробовать »
text	Фон отрисовывается в пределах переднепланового текста.	Попробовать »
initial	Устанавливает свойство в значение по умолчанию.	Попробовать »
inherit	Наследует свойство от родительского элемента.

Практика

Какие из следующих значений можно использовать со свойством 'background-clip' в CSS?

'padding-box''content-box''border-box''shadow-box'