Remover background de uma image usando apenas CSS

Nota: apenas traduzi o texto abaixo e postei aqui. As referências estão no fim deste artigo.

Neste blog post para iniciantes, aprenderemos como remover o background de uma image usando apenas CSS, especificamente a CSS property mix-blend-mode. Esta técnica é útil para criar efeitos visuais interessantes e melhorar o desempenho do seu site, reduzindo a necessidade de imagens editadas.

Por que esse truque é importante?

Ao baixar um arquivo .png, você pode esperar que ele tenha um transparent background. No entanto, nem sempre é esse o caso. Às vezes, um arquivo .png pode ter uma background color sólida, como white ou black.

Nesses casos, você pode usar a CSS property mix-blend-mode para remover a background color sólida e criar a aparência de um transparent background.

O que é mix-blend-mode?

mix-blend-mode é uma CSS property que define como o conteúdo de um elemento deve se misturar com o conteúdo do parent element e seu background. Com isso, você pode criar misturas e cores agradáveis ​​para partes do conteúdo de um elemento, dependendo de seu background direto.

Confira este artigo.

Para remover o background de uma image, usaremos a CSS property mix-blend-mode com o valor multiply. Este valor removerá as partes mais brancas da image. Aqui está um exemplo:

Imagem dentro de div:

Image dentro da div com mix-blend-multiply:

Da mesma forma, podemos escrever isso com TailwindCSS.

Neste tutorial, aprendemos como remover o background de uma image usando apenas CSS e a property mix-blend-mode. Essa técnica permite maior flexibilidade de design, melhor desempenho e melhores benefícios de SEO em comparação ao uso de imagens editadas. Com esse conhecimento, você pode criar efeitos visuais interessantes em seu site e melhorar a experiência geral do usuário.

Fonte

Artigo escrito por jeetvora331.