Questão Por que as bordas claras aparecem em PNGs transparentes online?


Toda vez que tento usar imagens PNG transparentes em sites, as bordas brancas continuam aparecendo ao redor das imagens, vistas na foto abaixo. Por que isso está acontecendo e como posso impedir que isso aconteça?

1

(Atualmente estou usando o Google Chrome 27.0.1453.116)


2


origem


Como você criou o PNG? Qual compressão (ou seja, PNG24?) Você está usando? - kobaltz
Isso é uma captura de tela do problema - não é transparente? Que tal anexar a imagem real? - Paul
@kobaltz: Na verdade, é um arquivo do AI aberto no Photoshop e salvo como PNG. Salvei-os em uma grande largura e altura para compatibilidade de exibição de retina. Esses pontos brancos ocorrem principalmente quando eu os dimensiono usando CSS, e sou forçado a usar o -webkit-optimize-contrast nele, mas ele deixa um efeito muito desconcertante quando dimensionado realmente pequeno.


Respostas:


Isso estava me deixando louco também, eu tive que me inscrever para responder, então ninguém mais sente essa frustração ...

Parece ser baixo para a renderização da imagem que o navegador está usando para redimensionar os PNGs transparentes que estão adicionando uma leve vantagem a ele.

Eu encontrei adicionando as seguintes propriedades css para o elemento de imagem (ou se é uma imagem de fundo, o próprio elemento) corrige o problema para mim no Chrome e no Firefox:

img, div.with-resized-background {
      image-rendering : -webkit-optimize-contrast
      image-rendering : optimizeQuality
}

Você pode ler sobre mais opções aqui: https://developer.mozilla.org/en/docs/Web/CSS/image-rendering


4





Resposta tardia, mas isso funciona:

/* applies to GIF and PNG images; avoids blurry edges */
img[src$=".gif"], img[src$=".png"] {
    image-rendering: -moz-crisp-edges;         /* Firefox */
    image-rendering:   -o-crisp-edges;         /* Opera */
    image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */
    image-rendering: crisp-edges;
    -ms-interpolation-mode: nearest-neighbor;  /* IE (non-standard property) */
}

https://developer.mozilla.org/en/docs/Web/CSS/image-rendering

Aqui está outro link também que fala sobre o suporte ao navegador:

https://css-tricks.com/almanac/properties/i/image-rendering/


2