La imagen png transparente no es completamente transparente en el navegador

Estoy usando el navegador Chrome. tengo una totalmente transparente .png imagen para el logotipo, pero parece haber un problema:

enter image description here

Necesita mirar una segunda vez, pero como puede ver, la imagen tiene un tinte más claro que el fondo. Creo el fondo con CSS:

background: #e1e2e4;
background: -webkit-gradient(linear, left top,
            left bottom, from(#e1e2e4), to(#8f9094));

background: -moz-linear-gradient(top,  #e1e2e4,  #8f9094);
filter: progid:DXImageTransform.Microsoft.gradient
        (startColorstr='#e1e2e4', endColorstr='#8f9094'); 

background-repeat: no-repeat;
background-attachment: fixed;

¿Alguna idea de por qué sucede esto? ¿Como puedo resolver esto?

preguntado el 31 de julio de 12 a las 12:07

Realmente no puedo verlo... ¿El PNG está guardado en 24 bits? -

Probablemente la imagen tenga una opacidad muy leve en todo el fondo. ¿Ha intentado acceder a Photoshop (o equivalente), seleccionar el fondo, eliminarlo y volver a guardar la imagen? -

¿Está seguro de que la diferencia de color no es parte del degradado de fondo? -

Tengo este archivo en Photoshop, no hay ninguna capa encima. Es PNG RGB COLOR 8 BIT/CANAL -

@feeela: estaría de acuerdo. ArtWorkAD, ¿configuró el color de fondo en un sólido color y probado para ver si ve el mismo resultado? El cambio de color bien podría ser el punto de cambio de color para el degradado que configuraste en el fondo. -

3 Respuestas

Tiene que ver con los perfiles de color y la corrección de color. Ver este artículo para más detalles.

Respondido 31 Jul 12, 12:07

Estoy viendo este problema en Chrome. El artículo dice "Los PNG se pueden etiquetar de tres maneras diferentes. Primero, pueden tener un fragmento iCCP que contiene el perfil ICC asociado. Segundo, pueden etiquetarse explícitamente como sRGB usando un fragmento sRGB. Finalmente, pueden contener fragmentos gAMA y cHRM que describa la gamma y las cromaticidades de la imagen. El uso de cualquiera de estos métodos hará que Firefox corrija el color de la imagen. [...] Use TweakPNG y elimine los fragmentos de gAMA, cHRM, iCCP y sRGB a mano". -- Hice eso, y todavía veo el efecto. - Führmanator

Solución fácil que parece funcionar ...

  • Descarga y ejecuta GIMP.
  • Abre tu archivo PNG.
  • En el menú principal, seleccione Imagen -> Modo -> Indexado.
  • Guarde/Sobrescriba su archivo PNG.

Respondido 07 Feb 20, 11:02

Estaba teniendo un problema con un PNG transparente cargado en un div con un background-color:red a través de markdown (reveal.js), pero los píxeles transparentes aparecían más claros que el color rojo:

enter image description here

El rojo más claro es el PNG transparente (y el blanco en la parte inferior izquierda es parte de un logotipo).

Como resulta, reveal.js carga imágenes Markdown (con el beige tema al menos) con un fondo blanco con 0.12 alfa:

.reveal section img {
    ...
    background: rgba(255, 255, 255, 0.12);
    ...
}

Deactivating it in the Inspect feature of Chrome developer tools made the problem go away.

Finalmente lo resolví en mi descuento diseñando la imagen con un color de fondo igual al de mi div

![The logo](logo_with_transparent_background.png){class=plain style="background-color:red"}

Respondido el 01 de diciembre de 19 a las 05:12

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.