Existe uma correção JavaScript PNG para o IE6 que permite o posicionamento de fundo CSS?
-
01-07-2019 - |
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?
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
.