28172 sujets

CSS et mise en forme, CSS3

[Résolu] Transparence plusieurs PNG

Bonjour,

Je cherche à obtenir un effet de transparence grâce aux images PNG, je remarque que lorsque je superpose 2 images PNG l'une sur l'autre, la transparence n'est pas appliquée sur la deuxième image. Avez-vous déjà eu ce problème ? (La transparence fait partie de l'image et n'est pas définie avec des CSS)

Les images sont affichées grâce à la propriété background-image sur des balises block comme <div> ou sur des balises <input type="submit" />.

Merci, bonne journée.
Modifié par KelT55 (02 Mar 2012 - 14:12)
Merci de ta réponse, en fait apparemment le problème viendrait simplement d'un background sur un bouton d'envoi, dans le code qui suit img.png est une image contenant de la transparence et la partie transparente est remplacée par du blanc sur le navigateur alors que l'image contient bien de la transparence sur mon éditeur d'image, un peu comme si j'avais enregistré l'image avec une mauvaise extension et pourtant c'est bien du PNG.

<!DOCTYPE html>
<html>
	<head>
		<title>Test images PNG</title>
		<style type="text/css">
			body {
				background-color: red;
			}
			input.toto {
				width: 160px;
				height: 35px;
				background-image: url('img.png');
				border: none;
			}
		</style>
	</head>
	<body>
		<form method="post" action="#">
			<input type="submit" class="toto" value="" />
		</form>
	</body>
</html>

Merci.
Modifié par KelT55 (28 Feb 2012 - 01:46)
C'est à dire que par défaut dans les navigateurs, les input ont un background-color qui leur est assigné.

Du coup si tu ne réinitialise pas ces styles, ça ne va pas le faire.

Voilà un exemple reprenant à peu près ce que tu as envoyé : http://jsfiddle.net/n6SwL/

Est ce que cela répond à ta question ?
Parfait, merci. J'ai rajouté la ligne suivante au dessus de background-image

background-color: transparent;

Modifié par KelT55 (02 Mar 2012 - 14:13)
Sujet clos
Aller à