Clipe de fundo - CSS-Tricks

Anonim

background-clip permite controlar até que ponto uma imagem ou cor de plano de fundo vai além do preenchimento ou conteúdo de um elemento.

.frame ( background-clip: padding-box; )

Valores

  • border-boxé o valor padrão. Isso permite que o plano de fundo se estenda até a borda externa da borda do elemento.
  • padding-box corta o fundo na borda externa do preenchimento do elemento e não permite que ele se estenda até a borda.
  • content-boxcorta o fundo na borda da caixa de conteúdo.
  • inheritaplica a background-clipconfiguração do pai ao elemento selecionado.

Demos

background-clip é melhor explicado em ação, por isso reunimos duas demos para mostrar como funciona.

Na primeira demonstração, cada div tem um parágrafo dentro dele. O parágrafo é o conteúdo do div. Cada div tem um fundo amarelo e uma borda azul claro semitransparente de 5 pixels.

Veja o clipe de fundo da caneta de CSS-Tricks (@ css-tricks) no CodePen.

Por padrão, ou com background-clip: border-boxdefinido, o fundo amarelo se estende até a borda externa da borda. Observe como a borda parece verde por causa do fundo amarelo abaixo dela.

Quando o background-clipé alterado para padding-box, a cor de fundo para onde termina o preenchimento do elemento. Observe que a borda é azul porque o fundo não pode sangrar na borda.

Com background-clip: content-box, a cor de fundo só se aplica ao conteúdo do div, neste caso o elemento de parágrafo único. O preenchimento e a borda do div não têm uma cor de fundo. Mas, há um pequeno detalhe que vale a pena mencionar: a cor se estende até a margem do conteúdo. Verifique as diferenças entre o primeiro e o segundo exemplos com content-box.

No primeiro content-boxexemplo, as margens padrão do navegador são aplicadas ao parágrafo e os clipes de fundo após a margem. No segundo exemplo, a margem é definida como 0 no CSS e o fundo é cortado na borda do texto.

Este próximo programa interativo background-clipcom uma imagem de fundo. O conteúdo desta demonstração é um div vazio menor.

Veja o exemplo interativo do clipe de plano de fundo da caneta por Timothy Miller (@tjacobdesign) no CodePen.

Esta demonstração também se aplica background-size: covere background-repeat: no-repeatalém de background-clipcontrolar a imagem de fundo, que de outra forma se repetiria até o corte.

Texto

Existe uma versão prefixada do fornecedor que funciona para recortar um plano de fundo no texto. Para ver esse trabalho, o texto também precisará ser transparente. Felizmente, há outra propriedade de cor de texto prefixada pelo fornecedor que pode ser efetivamente substituída color, tornando-a segura para uso, pois pode ter um substituto:

.background-clip-text ( /* if we can clip, do it */ -webkit-text-fill-color: transparent; -webkit-background-clip: text; /* what will show through the text ~ or ~ what will be the background of that element */ background: whatever; /* fallback text color ~ or ~ the actual color of text, so it better work on the background */ color: red; )

Firefox, Chrome e Safari suportam isso.

Veja o
texto Pen Lit de Chris Coyier (@chriscoyier)
no CodePen.

Relacionado

  • anexo de fundo
  • cor de fundo
  • imagem de fundo
  • origem do fundo
  • posição de fundo
  • fundo de repetição
  • tamanho do fundo

Mais recursos

  • background-clip na especificação CSS3
  • clipe de fundo em MDN
  • O CSS Box Model

Suporte para navegador

Tudo limpo!

cromada Safári Raposa de fogo Ópera IE Android iOS
1+ 3+ 4+ 10,5+ 9+ 4.1+ Funciona