2009-10-30 5 views
1

Snippet de mon CSS:image de fond PNG dans Firefox 3.5.4

#wrapper div.box { 
    background: url('box-bg.png') left top repeat-y; 
} 
#wrapper div.box h2 { 
    background: url('box-top.png') left top no-repeat; 
} 

qui ne fonctionne pas. Au lieu d'une image transparente, il affiche l'image mais avec un espace blanc à la place de l'arrière-plan transparent.

Si je fais:

<img src="box-top.png" alt="" /> 

L'image transparente apparaît correctement. Qu'est-ce qui casse ce problème?

+0

Le fait que cela fonctionne à partir du HTML, mais pas du css me demande si le chemin de l'image peut être différent lorsqu'ils sont référencés dans le css, par opposition à l'html. Avez-vous utilisé firebug pour regarder l'image en utilisant le panneau css avec le div sélectionné? – Karim

+0

Si possible, postez un lien s'il vous plaît, ce qui rend beaucoup plus facile d'analyser le problème. –

+0

Est-ce que la couleur de fond était: transparent? Je demande parce que vous avez accepté ma réponse. –

Répondre

3

Avez-vous essayé d'attribuer explicitement aux éléments un "background-color: transparent"?

+0

Oui, j'ai essayé que ... –

+0

Pouvez-vous poster un lien? –

+0

En fait, le problème était que la div qui était ci-dessous la div.box avait un fond blanc, je viens de supprimer cela. –

1

Puis-je demander quel navigateur vous utilisez? IE6 n'affiche pas correctement les fichiers PNG. Aussi, comment créez-vous votre PNG? Si c'est Photoshop, assurez-vous de faire une sauvegarde sur le Web ... ou il ne s'affichera pas correctement (problème de transparence).

2

Je suis d'accord avec Pekka - Est-il possible que ces éléments HTML héritent d'une couleur de fond blanche d'une autre règle CSS? Vous pouvez essayer:

#wrapper div.box { 
    background: transparent url('box-bg.png') left top repeat-y; 
} 
#wrapper div.box h2 { 
    background: transparent url('box-top.png') left top no-repeat; 
}