Propriedade CSS background-clip

A propriedade CSS background-clip define até onde a background-color e a background-image se estendem dentro de um elemento — ou seja, a área de pintura do fundo. Por padrão, o fundo é pintado até a borda externa da borda do elemento, mas background-clip permite limitá-lo à borda do padding, à borda do conteúdo ou até recortá-lo ao contorno do texto.

Esta página aborda o que cada valor faz, quando utilizá-lo, a diferença entre background-clip e a propriedade relacionada background-origin, além de um exemplo funcional para cada valor.

Se o elemento não tiver background-color ou background-image, esta propriedade não terá efeito visual.

A propriedade background-clip é uma das propriedades CSS3.

Quando usar

Fundos internos — use padding-box ou content-box para que uma borda translúcida (por exemplo, uma borda dashed ou dotted) mostre a página por trás, em vez da cor de fundo do elemento.
Texto com gradiente ou imagem — combine background-clip: text com uma background-image colorida e color: transparent para preencher as letras com um gradiente.
Cards em camadas — use em conjunto com background-origin para controlar onde uma imagem de fundo começa (origin) versus onde ela é cortada (clip).

Para recortar um fundo ao texto, também é necessária uma versão com prefixo de fornecedor (-webkit-background-clip) para compatibilidade na maioria dos navegadores (veja a observação sobre o valor text abaixo).

Valor Inicial	border-box
Aplica-se a	Todos os elementos. Também se aplica a ::first-letter e ::first-line.
Herdado	Não.
Animável	Não.
Versão	CSS3
Sintaxe DOM	object.style.backgroundClip = "content-box";

Sintaxe

Sintaxe da Propriedade CSS background-clip

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

Exemplo da propriedade background-clip:

Exemplo da Propriedade CSS background-clip com o valor 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>

Experimente Você Mesmo »

No exemplo a seguir, veja a diferença entre os valores "padding-box" e "border-box".

Exemplo da propriedade background-clip com os valores "padding-box" e "border-box":

Exemplo da Propriedade CSS background-clip com o valor 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>

Experimente Você Mesmo »

O valor text recorta o fundo de forma que ele só seja visível através do contorno do texto em primeiro plano. Para ver o fundo em vez de letras sólidas, defina color: transparent (ou uma cor semitransparente) para que o próprio texto não cubra o fundo. Esta é a técnica padrão para títulos preenchidos com gradiente.

Suporte de navegadores: o valor text ainda requer o prefixo -webkit-background-clip: text na maioria dos navegadores. Sempre declare ambos -webkit-background-clip: text; e background-clip: text; juntos, como no exemplo abaixo.

Exemplo da propriedade background-clip com o valor "text":

Exemplo da Propriedade CSS background-clip com o valor 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>

Experimente Você Mesmo »

background-clip vs background-origin

Essas duas propriedades são fáceis de confundir porque compartilham as mesmas palavras-chave de caixa (border-box, padding-box, content-box):

background-origin define onde a área de posicionamento da imagem de fundo começa — a caixa de referência para background-position e um background-size diferente de cover.
background-clip define onde o fundo pintado é cortado — qualquer coisa fora desta caixa não é exibida.

Um fundo pode, portanto, começar na borda da borda do elemento (background-origin: border-box) mas ser recortado à borda do conteúdo (background-clip: content-box), de forma que a parte sobre o padding e a borda fique oculta.

Valores

Valor	Descrição	Experimente
border-box	O fundo aparece atrás da borda. Este é o valor padrão.	Experimente »
padding-box	O fundo aparece dentro da borda.	Experimente »
content-box	O fundo se estende até a borda da caixa de conteúdo.	Experimente »
text	O fundo é pintado dentro do texto em primeiro plano.	Experimente »
initial	Define a propriedade com seu valor padrão.	Experimente »
inherit	Herda a propriedade do elemento pai.

Prática

Quais dos seguintes valores podem ser usados com a propriedade 'background-clip' em CSS?

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