background-clip

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since julho de 2015.

* Some parts of this feature may have varying levels of support.

A propriedade CSSbackground-clip especifica se o fundo de um elemento, seja cor ou imagem, se extende debaixo de sua área de borda, preenchimento ou conteúdo.

Experimente

background-clip: border-box;

background-clip: padding-box;

background-clip: content-box;

background-clip: text;color: transparent;

<section>  <div>This is the content of the element.</div></section>

#example-element {  background-image: url("/shared-assets/images/examples/leopard.jpg");  color: #d73611;  text-shadow: 2px 2px black;  padding: 20px;  border: 10px dashed #333;  font-size: 2em;  font-weight: bold;}

Se o elemento não possuir as propriedadesbackground-image oubackground-color definidas, esta propriedade só terá um efeito visual quando a borda tiver regiões transparentes ou regiões parcialmente opacas (devido aoborder-style ouborder-image); caso contrário a borda encobrirá a diferença.

Initial value	`border-box`
Aplica-se a	all elements. It also applies to`::first-letter` and`::first-line`.
Inherited	não
Computed value	as specified
Animation type	a repeatable list

Sintaxe

css

/* Valores de palavra-chave */background-clip: border-box;background-clip: padding-box;background-clip: content-box;background-clip: text;/* Valores globais */background-clip: inherit;background-clip: initial;background-clip: unset;

Valores

border-box: O fundo se extende até fora da fronteira da borda (mas por baixo da borda na ordenação-z).
padding-box: Nenhum fundo é desenhado abaixo da borda (o fundo se extende até a borda externa do preenchimento).
content-box: O fundo é desenhado dentro (cortado) a caixa de conteúdo.
textExperimental: O fundo é desenhado dentro (cortado) do texto aparente.

Sintaxe formal

background-clip =
<bg-clip>#

<bg-clip> =
<visual-box>|
[border-area||text]

<visual-box> =
content-box|
padding-box|
border-box

Exemplos

Usando`border-box`

Conteúdo HTML

html

<p>O fundo se extende atrás da borda.</p>

Conteúdo CSS

css

p {  border: 0.8em darkviolet;  border-style: dotted double;  margin: 1em 0;  padding: 1.4em;  background: linear-gradient(60deg, red, yellow, red, yellow, red);  font: 900 1.2em sans-serif;  text-decoration: underline;  background-clip: border-box;}

Resultado

Usando`padding-box`

Conteúdo HTML

html

<p>O fundo se extende até dentro da fronteira da borda.</p>

Conteúdo CSS

css

p {  border: 0.8em darkviolet;  border-style: dotted double;  margin: 1em 0;  padding: 1.4em;  background: linear-gradient(60deg, red, yellow, red, yellow, red);  font: 900 1.2em sans-serif;  text-decoration: underline;  background-clip: padding-box;}

Resultado

Usando`content-box`

Conteúdo HTML

html

<p>O fundo se extende somente até o limite da caixa de conteúdo.</p>

Conteúdo CSS

css

p {  border: 0.8em darkviolet;  border-style: dotted double;  margin: 1em 0;  padding: 1.4em;  background: linear-gradient(60deg, red, yellow, red, yellow, red);  font: 900 1.2em sans-serif;  text-decoration: underline;  background-clip: content-box;}

Resultado

Usando`text`

Conteúdo HTML

html

<p>O fundo se extende dentro do texto.</p>

Conteúdo CSS

css

p {  border: 0.8em darkviolet;  border-style: dotted double;  margin: 1em 0;  padding: 1.4em;  background: linear-gradient(60deg, red, yellow, red, yellow, red);  font: 900 1.2em sans-serif;  text-decoration: underline;  /* Note a necessidade de adicionar trânsparência ao texto*/  background-clip: text;  -webkit-background-clip: text;  color: rgba(0, 0, 0, 0.2);}