[Résolu] Héritage de la Transparence

Bonjour,

Voilà je block sur l'héritage de la transparence !

J'ai essayer d'indiquer une valeur a 100 pour le contenu mais ne fonctionne pas !

Après des rerches je suis tomber sur ceci :

http://developer.mozilla.org/en/docs/Useful_CSS_tips:Color_and_Background

Mais j'ai pas réussi a jouer du z-index ...

Voici ma page :

http://www.thymo.fr/iam_bataclan/

Je voudrais que mon image dans le cadre orange soit opaque, seul le cadre orange doit etre translucide !

J'ai essayer avec les postions:absolute mais ca n'a rien donner

Quelqu'un pourrait-il me mettre sur une piste ou bien me donner un exmple clair !

Voici mon CSS : http://www.thymo.fr/iam_bataclan/iam.css

Par avance merci !
Modifié par thymo (08 Apr 2007 - 18:43)

thymo a écrit :
Je voudrais que mon image dans le cadre orange ne soit pas opaque, seul le cadre orange doit etre translucide !

Heu... si l'image ne doit pas être opaque, elle doit donc être translucide, non ?
Ça se contredit un peu ta phrase.

Si tu veux que l'images soit opaque (pas d'effet de transparence) mais que la bordure orange soit translucide, le plus simple est de ne pas utiliser opacity mais tout simplement une image de fond orange translucide en PNG-24 (RVB avec couche alpha). Par contre, la bordure noire de 1px sera opaque.

Ou alors :

[b]HTML :[/b]
<div id="photo">
	<img src="..." alt="..." />
</div>

[b]CSS :[/b]
div#photo {
	border: none;
	padding: 1px;
	background: url(images/noir-transparent.png) repeat;
}
div#photo img {
	display: block;
	padding: 10px;
	background: url(images/orange-transparent.png) repeat;
}

Quoi qu'il en soit, opacity s'applique à l'élément et à tous ses descendants, même s'ils sont positionnés en absolu.

Exceuse moi pour la phrase, ah oui j'avais pas penser au PNG je vais essayer merci

http://iam.thymo.fr/?i=1

Voilà le résultat final, merci bien

Deux remarques :
- L'image de fond suivante n'a aucune raison d'être en PNG. Elle est d'ailleurs au moins dix fois trop lourde (339 Ko). Tout le monde ne dispose pas du très haut débit...
http://iam.thymo.fr/img/fond-iam.png

- L'image de fond suivante est dans le bon format, mais il est déconseillé de créer des images de 1x1px pour les répéter automatiquement quelques dizaines ou centaines de millier de fois. Avec une image de 10x10px, tu diminues par 100 le nombre de répétitions que doit calculer le navigateur. Avec une image de 50x50px, tu les diminues par 2500. Ce qui arrangera les visiteurs de ton site dont l'ordinateur n'est pas un foudre de guerre. De plus, avec le format PNG, une image unie de 50x50px sera à peine plus lourde que l'équivalent en 1x1px.
http://iam.thymo.fr/img/orange.png

Ah j'en apprend des choses !

Pour l'image de 1px / 1px je pensais que c'étais plus rapide a charger

thymo a écrit :
Pour l'image de 1px / 1px je pensais que c'étais plus rapide a charger

Si l'image est vraiment plus légère, oui. Mais en fait entre une image de 1x1 ou de 10x10, il n'y a pas une grande différence, surtout avec un format comme le PNG. Et si l'image passe de 300 octets à 350 octets, c'est franchement négligeable.

Les lenteurs d'affichage de la page constatées par les utilisateurs sont un peu moins négligeables.