Sim, e eu não acredito ainda que é possível isso!

Olá ✌🏾 , estava eu olhando flyers, e já a muito tempo me sinto limitado na web por não conseguir colocar uma imagem de fundo em um texto, e, me lembro que um dia procurei mesmo fazer isso de todas as formas e não consegui, até que nesta semana eu me dediquei e nem que eu precisasse fazer uma gambiarra eu iria fazer, e lendo no site da webkit.org vi uma possibilidade, sim o exemplo estava errado neste artigo, mas notei que tinha como "reduzir" o background ao fundo de um texto, foi neste artigo oficial.

E quando eu olhei, eu fiquei triste, porque foram apenas esperanças jogadas foras, mas estava sem mais o que fazer e pesquisei o que faria o background-clip e olhei na MDN e ainda não acreditando eu resolvi testar, e 🤤

PEGOOOOOUUU, AAAAAH!

HOJE SOU UMA PESSOA FELIZ 🍃, e após me acalmar eu pensei

Ok, agora que me acalmei, vamos testar diferentes formatos de imagens.

PNG, tudo certo, JPEG tudo ok, PNGs trasparentes, perfeito, e entrei em total tensão quando pensei, será que pega gif? Então decidi testar, e

MEU DESUS, EU NÃO ACREDITOOO!

VEJA COMO É

Como funciona

Basicamente, existe uma imagem de fundo e o código que eu já havia dito, o background-clip ele fará com que o fundo de fato seja dentro da imagem, assim como um papel furado, e o fundo será a parte de trás do papel entende? algo assim:

Vamos aos códigos

E você que não leu o texto e veio logo a este tópico deve está pensando:

Nossa, deve ser trilhóes de linhas de códigos

A imagem que eu utilizei foi esta imagem aqui, veja como fica este códigozinho:

See the Pen oEWNrZ by Julio Lira (@Jul10l1r4) on CodePen.

Enfim, hoje será um dia marcado em minha vida, e acredito que na sua também né?! Eu fiquei extremamente alegre depois dessa descoberta

Esta será a reação de quando verem você mesmo usando em qualquer coisa

Enfim, era isso... boas práticas