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 …


This content originally appeared on DEV Community and was authored by doug-source

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:

example image no property

Image dentro da div com mix-blend-multiply:

example image with property

Da mesma forma, podemos escrever isso com TailwindCSS.

example image with 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.


This content originally appeared on DEV Community and was authored by doug-source


Print Share Comment Cite Upload Translate Updates
APA

doug-source | Sciencx (2024-09-04T17:53:36+00:00) Remover background de uma image usando apenas CSS. Retrieved from https://www.scien.cx/2024/09/04/remover-background-de-uma-image-usando-apenas-css/

MLA
" » Remover background de uma image usando apenas CSS." doug-source | Sciencx - Wednesday September 4, 2024, https://www.scien.cx/2024/09/04/remover-background-de-uma-image-usando-apenas-css/
HARVARD
doug-source | Sciencx Wednesday September 4, 2024 » Remover background de uma image usando apenas CSS., viewed ,<https://www.scien.cx/2024/09/04/remover-background-de-uma-image-usando-apenas-css/>
VANCOUVER
doug-source | Sciencx - » Remover background de uma image usando apenas CSS. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/09/04/remover-background-de-uma-image-usando-apenas-css/
CHICAGO
" » Remover background de uma image usando apenas CSS." doug-source | Sciencx - Accessed . https://www.scien.cx/2024/09/04/remover-background-de-uma-image-usando-apenas-css/
IEEE
" » Remover background de uma image usando apenas CSS." doug-source | Sciencx [Online]. Available: https://www.scien.cx/2024/09/04/remover-background-de-uma-image-usando-apenas-css/. [Accessed: ]
rf:citation
» Remover background de uma image usando apenas CSS | doug-source | Sciencx | https://www.scien.cx/2024/09/04/remover-background-de-uma-image-usando-apenas-css/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts