[Resolu] Problème d'héritage de class ?

Bonjour,

je rencontre un problème sur unn propriété "opacity" est un problème d'héritage ?

Voici mon code CSS :

.trans {
	width:133px;
	height:150px;
	padding-top:75px;
	background-repeat: no-repeat;
	float:left;
	margin:0 5px 0 0;
}
.trans div { 
	height:60px;
	background-color:black;
	opacity:0.6;
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60);
	-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
	color:white;
}
.trans div *{
	opacity:1;
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
	-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	margin:0px;
	padding:0px;
} 

#trans1 {
	background-image:url('http://www.developpementphoto.net/images/produits/mypix/thumb/s_00007345.jpg');
}
#trans2 {
	background-image:url('http://www.developpementphoto.net/images/produits/mypix/thumb/s_00855941.jpg');
}
#trans3 {
	background-image:url('http://www.developpementphoto.net/images/produits/mypix/thumb/s_00144157.jpg');
}

Et mon HTML :

<div id="trans1" class="trans">
	<div> 
		<h3>Le livre photo</h3>
	</div>
</div>

<div id="trans2" class="trans">
	<div>
		<h3>Calendrier photo</h3>
	</div>
</div>

<div id="trans3" class="trans">
	<div>
		<h3>Le mug photo</h3>
		<ul>
			<li>Comparez le prix</li>
		</ul>
	</div>
</div> 

Mon problème se situe ici :

.trans div *{
	[#red]opacity:1;
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
	-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";[/#]
	margin:0px;
	padding:0px;
}

Les propriétés margin et padding elles sont appliquées correctement,

Visuellement cela ressemble à ca :

http://www.developpementnumerique.com


Merci de votre aide.

Jérémie
Modifié par mims1664 (18 Dec 2009 - 11:35)

Bonjour ce n'est pas tout à fait un problème, puisque c'est le "rendu attendu".

En effet, si ta classe parent à une opacité de 0.6 et ta classe enfant une opacité de 1 ; avec l'héritage la classe enfant aura en fait comme opacité : son opacité * l'opacité de son parent (donc toujours 0.6).

Si tu utilises l'opacité pour créer un fond semi transparent, le mieux est d'utiliser un png (ça ne fonctionnera pas avec IE6 (il n'y aura pas de semi transparence) mais cela fonctionnera parfaitement avec les autres navigateurs du marché.
Modifié par Laurie-Anne (18 Dec 2009 - 10:57)

Bonjour,

oui effectivement le problème est rapidement résolut de cette facon, je n'osais pas procéder ainsi mais c'est sur qu'il y aura moins de problèmes de compatibilité.

Merci pour ce dépannage rapide.

Jérémie