CSS: A abrangência do fundo com background-clip

Foto de Negative Space no Pexels

A propriedade background-clip serve para definir a abrangência da cor ou imagem de fundo de um elemento em bloco, como é o caso de <div>.

Nos três primeiros exemplos abaixo, o elemento <div> está com a seguinte folha de estilos:

div {background-color:#AFEEEE; border:10px #45B5AA dotted; padding:10px; background-clip:___________;}

Com background-clip: content-box, o bg só abrange a parte destinada ao conteúdo:

Vive dentro de mim
uma cabocla velha
de mau-olhado,
acocorada ao pé do borralho,
olhando para o fogo.

Cora Coralina

Com background-clip: padding-box, a abrangência do bg começa no espaçamento padding, que fica entre a borda e o conteúdo:

Vive dentro de mim
uma cabocla velha
de mau-olhado,
acocorada ao pé do borralho,
olhando para o fogo.

Cora Coralina

Com background-clip: border-box, a abrangência do bg começa na borda:

Vive dentro de mim
uma cabocla velha
de mau-olhado,
acocorada ao pé do borralho,
olhando para o fogo.

Cora Coralina

E se a gente não definir valor para background-clip, o padrão também é border-box:

Vive dentro de mim
uma cabocla velha
de mau-olhado,
acocorada ao pé do borralho,
olhando para o fogo.

Cora Coralina

Agora vamos ver com imagem no fundo. Estou usando o seguinte código nos exemplos:

div {background:url('imagem.png') #D6EDF5; border:10px #FCE1E0 dotted; padding:10px; background-clip: __________}

Com background-clip: content-box:

Não conhece nem lá nem si,
mas fecha os olhos e sorri.
Roda, roda, roda, com os bracinhos no ar
e não fica tonta nem sai do lugar.

Cecília Meireles

Com background-clip: padding-box:

Não conhece nem lá nem si,
mas fecha os olhos e sorri.
Roda, roda, roda, com os bracinhos no ar
e não fica tonta nem sai do lugar.

Cecília Meireles

Com background-clip: border-box:

Não conhece nem lá nem si,
mas fecha os olhos e sorri.
Roda, roda, roda, com os bracinhos no ar
e não fica tonta nem sai do lugar.

Cecília Meireles

Sem background-clip:

Não conhece nem lá nem si,
mas fecha os olhos e sorri.
Roda, roda, roda, com os bracinhos no ar
e não fica tonta nem sai do lugar.

Cecília Meireles

Para fazer seus próprios experimentos com essa propriedade, você pode usar CodePen e W3Schools.

Até mais!