Como fazer com que a transparência PNG funcione em navegadores que não a suportam nativamente?

Question

Nosso (querido) designer continua criando arquivos PNG com fundos transparentes para uso em nossas aplicações.Gostaria de ter certeza de que esse recurso do PNG também funciona em navegadores "antigos".Qual é a melhor solução?

edições abaixo

@mabwi & @syd - Concordo ou não com o uso de PNG, não é o ponto.Esse é um problema que preciso resolver!

@Tim Sullivan - IE7.js parece muito legal, mas não acho que queira apresentar todas as outras alterações em um aplicativo.Gostaria de uma solução que resolvesse exclusivamente o problema do PNG.Obrigado pelo link.

Answer 1

Aqui está um ótimo artigo que explica e mostra como lidar com a transparência PNG em navegadores mais antigos: http://www.alistapart.com/stories/pngopacity/

Answer 2

Encontrei o que parece ser uma solução muito boa aqui: Unidade interativa -> Laboratórios -> Correção de unidade PNG

atualizar A unidade PNG também é apresentada em um lista de opções de correção de PNG no NETTUTS

Aqui estão os destaques do site deles:

• JavaScript muito compacto:Menos de 1 KB!
• Corrige alguns problemas de interatividade causados ​​pelo atributo de filtro do IE.
• Funciona em objetos img e atributos de imagem de fundo.
• Executa automaticamente.Você não precisa definir classes ou chamar funções.
• Permite elementos de largura e altura automáticas.
• Super simples de implantar.

Answer 3

• IE PNG Correção 2.0 que suporta background-position e -repeat!

Também paleta PNG de 8 bits com transparência alfa total existem, ao contrário do que o Photoshop e o GIMP podem fazer você acreditar, e eles se degradam melhor no IE6 – apenas reduz a transparência para 1 bit.Usar pngquant para gerar esses arquivos a partir de PNGs de 24 bits.

Answer 4

IE7.js fornecerá suporte para PNGs (incluindo transparência) no IE6.

Answer 5

Já errei tentando fazer um site com .pngs e simplesmente não vale a pena.O site fica lento e você usa hacks que não funcionam 100%.Aqui está um bom artigo sobre algumas opções, mas meu conselho é encontrar uma maneira de fazer os gifs funcionarem até que você não precise mais oferecer suporte ao IE6.Ou apenas dê ao IE6 uma experiência degradada.

Answer 6

Usar PNGs no IE6 dificilmente é mais difícil do que qualquer outro navegador.Você pode oferecer suporte a tudo isso em seu CSS sem Javascript.Eu já vi esse hack mostrado antes ...

div.theImage {
    background  : url(smile.png) top left no-repeat;
    height      : 100px;
    width       : 100px;
}

* html div.theImage {
    background  : none;     
    progid:DXImageTransform.Microsoft.AlphaImageLoader(src="layout/smile.png", sizingMethod="scale");
}

Não tenho certeza se isso é CSS válido, mas dependendo do site, pode não importar tanto.

(vale a pena notar que o URL da primeira imagem é baseado no diretório da folha de estilo, enquanto o segundo é baseado no diretório da página que está sendo visualizada - por isso eles não correspondem)

Answer 7

@Hboss

tudo bem se você souber exatamente todos os arquivos (e as dimensões de cada um) que irá exibir - seria uma dor de cabeça manter esse arquivo CSS, mas suponho que seria possível.Quando você quiser começar a usar PNGs transparentes para alguns propósitos muito comuns:a) gráficos incidentais, como ícones (talvez de tamanhos diferentes) que funcionam em qualquer fundo, e b) fundos repetidos;então você está ferrado.Todas as soluções alternativas que tentei encontraram um obstáculo em algum momento (não é possível selecionar o texto quando o plano de fundo é transparente, às vezes as imagens são exibidas em tamanhos excêntricos, etc., etc.), e descobri que, para obter o máximo de confiabilidade, terei que reverter para gifs.

Meu conselho é dar uma chance ao hack de transparência PNG, mas ao mesmo tempo perceber que definitivamente não é perfeito - e lembre-se, você está se curvando para trás para os usuários de um navegador com mais de 7 anos.O que eu faço hoje em dia é dar aos usuários do IE6 um pop-up em sua primeira visita ao site, com um lembrete amigável de que seu navegador está desatualizado e não oferece os recursos exigidos pelos sites modernos e, embora façamos o possível para dar a você o melhor, você terá uma experiência melhor em nosso site e na Internet como um todo se estiver BEM ATUALIZADO.

Answer 8

Acredito que todos os navegadores suportam PNG-8.Não é alfa misturado, mas tem fundos transparentes.

Answer 9

Posso estar enganado, mas tenho certeza de que o IE6 e menos simplesmente não fazem transparência com arquivos PNG.

Você meio que é, e meio que não é.

O IE6 não tem suporte nativo para eles.

No entanto, o IE tem suporte para objetos javascript/css e COM personalizados malucos (que é como eles implementaram originalmente o XmlHttpRequest)

Todos esses hacks basicamente fazem isso:

• Encontre todas as imagens png
• Use um filtro de imagem DirectX para carregá-los e produzir uma imagem transparente em algum tipo de formato que o IE entenda
• Substitua as imagens pela cópia filtrada.

Answer 10

Uma coisa a se pensar são os clientes de e-mail.Muitas vezes você deseja transparência PNG-24, mas no Outlook 2003 com uma máquina usando o IE6.Os clientes de e-mail não permitem truques de CSS ou JS.

Aqui está uma boa maneira de lidar com isso.http://commadot.com/png-8-that-acts-like-png-24-without-fireworks/

Answer 11

Se você exportar suas imagens como PNG-8 do Fireworks, elas funcionarão da mesma forma que imagens GIF.Assim, eles não parecerão uma merda e cinzas, transparência será transparência, mas não terão toda a beleza de 24 bits que outros navegadores têm.

Pode não resolver totalmente o seu problema, mas pelo menos você pode chegar lá apenas reexportando-os.

Answer 12

Posso estar enganado, mas tenho certeza de que o IE6 e menos simplesmente não fazem transparência com arquivos PNG.

Tenho duas "soluções" que uso.Crie arquivos GIF com transparência e use-os em qualquer lugar, ou apenas use-os para IE 6 e versões anteriores com folhas de estilo condicionais.O segundo realmente só funciona se você os usar como plano de fundo, etc.