PNG Transparente no IE6
October 12, 2008 by Marcio MisumiA seguir vamos aprender como utilizar png transparente utilizando a tag img diretamente no HTML ou inserindo em background no CSS.
Usar png transparente na tag img diretamente no HTML
Primeiro você deve salvar o arquivo png.htc. Procure deixar este arquivo no mesmo diretório do arquivo CSS.
No arquivo png.htc existe uma variável “blankSrc” que referencia uma imagem. O caminho (path) desta imagem é em relação ao arquivo HTML. Esta imagem pode ser salva como blank.gif, deve ser transparente e ter as dimensões de 1×1.
... var blankSrc = "images/background/blank.gif"; ...
Agora você precisa colocar em seu código CSS:
img {
behavior: url("css/png.htc");
}
OBS: O caminho (path) para a URL também é em relação ao arquivo HTML.
Usar png transparente como background no CSS
Para usar png transparente como background no CSS é necessário utilizar o seguinte código:
height: 420px;
width: 500px;
background-image: url(images/imagem-transparente.png) !important;
background-image: none;
filter: none !important;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true,sizingMethod=crop src=’images/imagem-transparente.png’);
}
OBS: No filtro, o caminho (path) para a URL da imagem é em relação ao arquivo HTML.
A propriedade sizingMethod pode ser crop, scale ou image. O mais usado é o scale, pois ele não "cropa" (corta) a imagem.
- crop – Corta a imagem para adaptar as dimensões do objeto;
- scale – Estica ou encolhe a imagem para preencher as bordas do objeto;
- image – Default. Aumenta ou diminui a borda do objeto para ajustar as dimensões da imagem.
Links com fundo transparente
Ao utilizar imagem png como background, o Internet Explorer 6.0 passa a interpretar os links como uma camada abaixo do background, de forma que o mouse não os alcance. Para solucionar este problema e tornar clicáveis os links é necessário definí-los no CSS com posição relativa.
div#conteudo a {
position: relative;
}
October 29th, 2008 at 6:52 pm
oi marcio. estou testando esse fix mas não está dando certo nem por decreto. veja se pode me ajudar, por favor.
o site é esse: http://www.fernaodias.com.br/hotsite_morada
a) coloquei o htc dentro do dir css:
/fernaodias.com.br/hotsite_morada/css/png.htc
b) o css está aqui:
/fernaodias.com.br/hotsite_morada/css/fdias_geral.css
c) o blank.gif está em:
/fernaodias.com.br/hotsite_morada/imgs/blank.gif
no css eu coloquei:
img {
behavior: url(”png.htc”);
}
e no htc eu coloquei:
var blankSrc = “../imgs/blank.gif”;
testei também sem o ../ e com ./ e /
não funcionou de jeito nenhum. onde está minha falha??
pode ser algo simples, mas minha cabeça já está zangada com isso.
valeu e parabéns pelo site!
October 30th, 2008 at 12:37 am
Marujo,
Analisei os códigos e encontrei 3 erros:
No CSS o correto é:
img {
behavior: url(”css/png.htc”);
}
Olha a observação que coloquei no post: “O caminho (path) para a URL também é em relação ao arquivo HTML.”
Você esqueceu de colocar “css/”.
Dentro do arquivo png.htc tem 2 erros:
- A linha onde contém o trecho do código a seguir está com quebra de linha forçada logo após a palavra “Loader”. Essa quebra de linha forçada não deve existir.
…
element.runtimeStyle.filter = “progid:DXImageTransform.Microsoft.AlphaImageLoader (src=’” + src + “‘,sizingMethod=’scale’)”;
…
- O caminho para a imagem blank.gif deve ser:
…
var blankSrc = “imgs/blank.gif”;
…
Para esta imagem também tem no post o seguinte comentário:
“O caminho (path) desta imagem é em relação ao arquivo HTML.”
Então conrrigindo estes 3 problemas vai funcionar o png transparente.
Qualquer problema é só falar.
Abraço.
October 30th, 2008 at 2:57 pm
Grande Márcio. deu certo!
mas apenas para as imagens que foram carregadas via
para as imagens que estão via background (…background=”imgs/bg_content.png”>) não deu certo.
tem alguma sugestão?
de qualquer forma, muito obrigado pela ajuda!!
uma pergunta: qual é esse plugin de security code pra postar comentários? ficou muito bom!!
October 30th, 2008 at 3:34 pm
Marujo,
Para você usar PNG como background por css não é da mesma maneira utilizando o png.htc.
Como você pode ver no post, no item “Usar png transparente como background no CSS” tá explicando certinho. Você tem que usar um filtro no CSS. Pode ser que ao copiar o código do blog as aspas simples ( ‘ ) não sejam as corretas, basta você trocá-las.
Espero que estas informações tenha ajudado você.
Abraço.
October 30th, 2008 at 4:14 pm
oi Marcio. as informações e sua ajuda forma muito úteis. valeu demais!! vou fazer uma adaptação pra resolver isso nas imagens carregadas via background. pelo que eu vi ele deixa tudo transparente. a imagem tem uma opacidade em 30% que acabou sumindo. vou ver aqui como resolvo isso.
November 5th, 2008 at 1:05 pm
Fiz o que vc falow certinho e aonde tinham minhas png’s ficou tranparente mais as imagens também sumiram fica so o espaço vazio
November 5th, 2008 at 5:45 pm
Mauro,
Então vi que você utilizou os PNG’s como background-repeat. Essa solução para o PNG transparente não funciona com a propriedade repeat do background.
Abraço.
November 6th, 2008 at 9:38 am
Marcio,
A solução apresentada por vc para os background’s deu certinha eu estava falando das Tag’s IMG diretamente no HTML, fiz toda a configuração do png.htc alterando o caminho do blank.gif para o local correto de acordo com a raiz do site no meu caso ficou “imagens/blank.gif” e na css o behavior ficou “png.htc pois deixei-o na raiz mesmo.
Aconteceu que no local aonde tinha as imagens PNG ficou apenas os espaços em branco.
Tenho que fazer alguma alteração direto na tag IMG?
A minha IMG esta dentro de uma TD isso causa algum problema?
Tenho o site full em .RAR se tiver interesse posso mandá-lo
Abraço!!!
November 6th, 2008 at 11:46 am
Mauro,
Então se você quiser me enviar os arquivos para eu analisar, fique a vontade. O importante é solucionarmos o teu problema. Vou te enviar um e-mail para que você me mande o .RAR. Assim que descobrir o problema eu coloco a solução aqui.
Abraço.
November 6th, 2008 at 8:46 pm
Mauro,
A imagem a ser gerada é um gif de 1×1 transparente e não png. Você está corrigindo um problema do png, portanto não faz sentido que a imagem usada como filtro seja png.
No arquivo onde contém o copyright você colocou um backgound usando a imagem blank.png que é desnecessário.
No caso das imagens que formam o background e que você inseriu no css é necessário usar os filtros conforme eu ensino no item “Usar png transparente como background no CSS”.
Lembrando que todas essas técnicas que eu ensino não se aplica ao uso do background-repet.
Se você seguir todos os passos explicados, todas as imagens png irão funcionar.
Aproveitando vou te dar algumas dicas:
– Hoje não se usa mais frame para a contrução de um website.
– Também não se usa mais recomendações de resolução e de browser.
Espero ter ajudado.
Abraço.
November 30th, 2008 at 8:47 pm
Cara, vc me ajudou muito com isso. Ja tava até dando dor de cabeça tentando achar uma solução p/ meu problema. Precisava do background .png transparente dentro da css para rodar no ie6, sua dica resolveu meu problema.
Abraço.
December 10th, 2008 at 3:08 pm
Tá difícil, tô tentando um jeito de colocar uma PNG transparente como fundo, mais esse background leva repeat-x, ainda não achei nenhum exemplo funcional. Será que ninguém conseguiu isso aqui ainda?
December 10th, 2008 at 6:44 pm
Vinícius, tudo bem? Então ainda não encontrei uma solução para utilizar PNG transparente junto com a propriedade repeat. Se eu descobrir algo farei um post, pode ter certeza. Mesmo assim espero ter ajudado. Abraço.
January 6th, 2009 at 2:39 pm
Opa pessoal… consegui usar PNG transparente como background. Achei a solução neste site: http://www.twinhelix.com/css/iepngfix/ …. baixem a versão v2.0 Alpha 3… comigo deu certo, usei um background com repeat e ficou tudo ok no IE 6.