w3docs logo

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;

Пример

<!DOCTYPE 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":

Пример

<!DOCTYPE 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>

В данном примере фон отображается в пределах текста переднего плана:

Пример

<!DOCTYPE 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 Значение элемента наследуется от родительского элемента.

Поддержка браузера

chrome firefox safari opera
15.0+ 4.0+
3.6 -moz- 		7.0+ 11.5+
10.1 -o-

Практикуйте свои знания

What does the 'background-clip' property in CSS define?
Считаете ли это полезным?