Existe uma correção JavaScript PNG para o IE6 que permite o posicionamento de fundo CSS?

StackOverflow https://stackoverflow.com/questions/86545

Pergunta

Eu vi algumas correções para permitir que imagens PNG ter transparência no Internet Explorer 6, mas eu ainda tenho que encontrar um que também permite que você defina a posição de fundo em CSS. Se você usar sprites, é um deal-breaker. Eu já recorreu ao uso de GIF de (que não são tão alta qualidade), não usar imagens transparentes em tudo, ou servir um estilo completamente diferente para o IE6. Existe uma correção para o IE6 que permite PNG transparências e fundo de posicionamento?

Foi útil?

Solução

Sim. Converter suas imagens para usar paletes indexados (png256). Você pode apoiar a transparência (como GIF), mas não um canal alfa.

Você pode fazer isso usando Irfanview eo plugin pngout, pngquant ou pngnq .

A equipe de desempenho YUI também fez um grande apresentação que cobre este um muitos outros conceitos de optimização da imagem.

Outras dicas

Este é uma nova técnica que tem aparecido no último mês ou assim. A partir da página:

Neste script são suportadas tags de imagem, com e sem um GIF espaçador em branco, e PNGs imagem de fundo pode ser posicionado, bem como repetido, mesmo se eles são menores do que o elemento de conteúdo que eles estão em.

Quando o fundo é o uso estático I TweakPNG para mudar a cor de fundo pedaço na PNG para a cor correta (em vez da cor cinza padrão). Qualquer navegador regular irá ignorar isso porque o canal alfa sobrepõe-lo, mas IE6 e menor vai usar essa cor em vez do canal alfa.

Isso significa que temos transparência no IE7 +, degradando muito bem no IE6 e inferiores. E tudo posicionamento css e repetindo são possíveis (porque não existem hacks!).

DD_belatedPNG.js funciona muito bem

Você pode realmente usar CSS puro para obter imagens de fundo posicionados com alfa transparência no IE6, aproveitando filtros alfa do IE6 e a propriedade CSS clip. Julien Lecomte descreve a técnica em seu blog .

Note que esta técnica não resultar em um acerto de desempenho para cada uso de um filtro de alfa.

IE PNG v2.0 Fix tem suporte para full alpha + position / repeat.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top