Opacité

Bonjour,

Voici mon code :

<style type="text/css">
<!--
#opa {filter:alpha(opacity=80);
    -moz-opacity:  0.8;
    opacity: 0.8;
    -khtml-opacity: 0.8;
	width:500px;
	height:250px;
	color:#FFFFFF;
	background-color:#000000;
	}

-->
</style>
<div id="opa">test opacite <img src="image.jpg" /></div>

Le code fonctionne à merveille. Le bloc #opa possède bien une opacité de 80% sur tous les navigateurs que j'ai testé.

Seulement, mon bloc #opa contient une image et je ne souhaite pas que celle-ci soit opaque J'ai essayé d'ajouté :

style="filter:alpha(opacity=100); -moz-opacity: 1; opacity: 1; -khtml-opacity:1;"

à

<img src="image.jpg" />

Mais cela ne fonctionne pas Des idées ?


Merci d'avance.
Modifié par Snoopy17 (24 Mar 2008 - 21:53)

Bonsoir snoopy17,

Je suppose que quelque chose de ce style devrait te donner le résultat escompté :

<style type="text/css">
<!--
#opa span{
	filter:alpha(opacity=80);
	-moz-opacity:  0.8;
	-khtml-opacity: 0.8;
	opacity: 0.8;
    	width:500px;
	height:250px;
	color:#FFFFFF;
	background-color:#000000;
	}
#opa img {
display:block;
}
-->
</style>
####
<div id="opa"><span>test opacite </span><img src="image.jpg" alt=""/></div>

Cdt,
Sylvain
Modifié par 6l20 (24 Mar 2008 - 22:25)

Bonjour,

L'opacité s'applique à un élément et à tous ses descendants. On ne peut pas «rétablir» une opacité complète lorsque le parent ou ancêtre d'un élément a une opacité partielle.

S'il s'agit de faire un fond translucide, il ne faut pas utiliser opacity. Il faut utiliser une couleur de fond, ou bien une image de fond.

Couleur de fond: voir du côté des couleurs RVBA.
Image de fond: utiliser une image de fond en PNG-24.

On obtiendra une meilleure compatibilité avec une image de fond en PNG-24.
Modifié par Florent V. (25 Mar 2008 - 00:05)

Florent V., si j'utilise une image de fond en png, ça passera pas sous IE 6 non ?

EDIT : je précise que je veux juste un fond noir transparent à 80% et donc pas un fond complexe avec dégradés etc...
Modifié par Snoopy17 (26 Mar 2008 - 21:50)

Snoopy17 a écrit :
Florent V., si j'utilise une image de fond en png, ça passera pas sous IE 6 non ?

Pas par défaut, non.
Deux pistes:
- filtre AlphaImageLoader pour obtenir l'effet de transparence voulu;
- rendu dégradé (fond noir ou gris sombre complètement opaque, par exemple) obtenu spécialement pour IE6 via un commentaire conditionnel.

La FAQ du forum parle des deux, donc je ne développe pas.

Snoopy17 a écrit :
EDIT : je précise que je veux juste un fond noir transparent à 80% et donc pas un fond complexe avec dégradés etc...

J'avais compris. Ça se code ainsi en CSS:

background: rgba(0,0,0,0.8);

Mais en l'absence de support par les principaux navigateurs, la solution de rattrapage est l'image de fond PNG.

Florent V. a écrit :

- rendu dégradé (fond noir ou gris sombre complètement opaque, par exemple) obtenu spécialement pour IE6 via un commentaire conditionnel.

J'ai rien trouvé à ce sujet là dans la FAQ.

En ce qui concerne le filtre AlphaImageLoader, j'ai déjà essayé mais j'ai toujours un bug : les liens qui ne fonctionnent plus dans ce bloc.

J'ai essayé de mettre :

a { position:relative; }

Mais rien à faire mon problème reste toujours le même

J'ai remarqué que le position:relative; ne fonctionnait pas car mon bloc avait déjà un position:absolute; (le bloc qui a un fond transparent et qui contient mes liens). Du coup je suis bloqué.

Voici mon code html :

<div id="menu">
	<ul id="menu-deroulant">
		<li><a href="#">Lien</a></li>
		<li><a href="#">Lien</a>
		<ul>
			<li><a href="#">CE LIEN NE FONCTIONNE PLUS</a></li>
                        <li><a href="#">CE LIEN NE FONCTIONNE PLUS</a></li>
		</ul>		
		</li>		
		<li><a href="#">Lien</a></li>		
		<li><a href="#">Lien</a></li>
	</ul>	
</div>

Et :

<!--[if lte IE 6]>
<style type="text/css">
#menu-deroulant li ul {        
		filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='img/menu.png');		
        background: none;
}

#menu-deroulant li ul a {
	position:relative;
}
</style>
<![endif]-->

Et le code CSS correspondant :

#menu {	
	width:850px;	
	height:45px;		
}

#menu-deroulant li a {
	color:#5baae6;	
	text-decoration:none;
	display:block;
}

#menu-deroulant li a:hover {	
	text-decoration:underline;
}

#menu-deroulant, #menu-deroulant ul {
	list-style-type:none;
}

#menu-deroulant li {	
	float:left;
	display:inline;
	margin-left:40px;	
}

#menu-deroulant li ul {	
	position:absolute;
	left: -9999em;	
	width:250px;
	background:url(img/menu.png) repeat-y;
	padding:7px 0px 0px 7px;	
}

#menu-deroulant li ul li {	
	display:block;
	width:250px;
	margin:0;
}

#menu-deroulant li ul li a {
	color:#FFFFFF;
	display:inline;
}

#menu-deroulant li ul li a:hover {
	color:#FFFFFF;
}

#menu-deroulant li:hover ul, #menu-deroulant li.sfhover ul {	
	left: auto;
}

Merci d'avance

Snoopy17 a écrit :
J'ai rien trouvé à ce sujet là dans la FAQ.

Je parlais des commentaires conditionnels (documentés dans la FAQ), que tu utilises par ailleurs. Après, c'est juste une question de logique: si je peux adresser un correctif CSS spécifiquement pour IE6, je dois pouvoir offrir un rendu «pas idéal mais correct» pour les utilisateurs de ce navigateur. Cf. les concepts de dégradation gracieuse (graceful degradation) et d'amélioration progressive (progressive enhancement) -- on pourra faire une petite recherche sur le Web sur ces sujets.

Snoopy17 a écrit :
J'ai remarqué que le position:relative; ne fonctionnait pas car mon bloc avait déjà un position:absolute; (le bloc qui a un fond transparent et qui contient mes liens). Du coup je suis bloqué.

Certains en ligne qui traitent de ce problème proposent une solution pour ce cas également, il me semble.

Une solution (article en anglais):
http://www.satzansatz.de/cssd/tmp/alphatransparency.html