Se eu tiver uma imagem transparente, ela tirará a cor do plano de fundo. Às vezes, no entanto, o primeiro plano da minha imagem é da mesma cor do plano de fundo. E às vezes eu acho que seria legal ser a cor oposta (complementar) de seu background. Por exemplo, preto para branco, vermelho para verde, azul para laranja, etc. Isso é possível e como eu faria isso?
Eu acho que isso é sobre design de site em particular.
Embora impossível com uma imagem sozinha (que tem apenas um canal alfa, nada mais), os navegadores modernos têm recursos CSS como background-blend-mode e mix- modo de mistura . Acho que definir o modo mix-blend como exclusion forneceria o resultado desejado ...
(Obviamente, isso é específico do navegador, embora seja amplamente suportado atualmente. Para o IE, você pode encontrar algo semelhante em filtros ...)
Uma imagem transparente - por definição - não tem uma cor de fundo. De fato, um arquivo de imagem normal não tem sequer um conceito de "primeiro plano" ou "segundo plano". Normalmente, as imagens consistem em apenas uma camada de pixels, e a cor desses pixels é definida pela quantidade de vermelho, verde e azul. Em imagens transparentes, esses pixels especificam adicionalmente um valor alfa que determina sua opacidade.
O que eu acho que você quer é uma imagem independente que possa de alguma forma descobrir em que plano foi mostrado. Isso é tecnicamente impossível. Por exemplo, um navegador apenas renderizará seu arquivo PNG transparente sempre que o site especificar sua localização, seja qual for a cor de fundo (ou imagem) existente. Você precisa gerar cores diferentes na imagem para diferentes origens.
(É claro que existem formatos de imagem mais complexos, como TIFF de várias camadas ou até mesmo um arquivo do Photoshop, em que pode haver várias camadas com diferentes efeitos de sobreposição, mas entendo que esse não é o contexto dessa pergunta. .)