28217 sujets

CSS et mise en forme, CSS3

[résolu] Superposition DIV et transparence

bonjour

j'aimerais, dans cet exemple
que le bandeau vert (2 DIV sur le DIV images) soit transparent

je l'ai vu faire sur un des nombreux sites de formation parcourus cette semaine, ... mais je mets plus la main dessus
et une rechercher sur "superposition" ne m'a pas aidé

la CSS


#photo_maxi{
position:absolute; 
left:180px;
top:80px;
z-index:20;
height:800px;
width:800px;
visibility: visible; background-color: #DED7BD;
border:1px solid gray;
}
#photo_maxi_nom_latin{
position:absolute; 
left:180px;
top:85px;
width:791px;
height:15px;
z-index:30;
font-family: Arial; 
font-style:italic;
font-weight:bold;
font-size: 14px;
color:#FFFFC8;
visibility: visible; background-color: #99cc99;
padding:5px;
}
#photo_maxi_back{
position:absolute; 
left:900px;
top:85px;
height:15px;
z-index:40;
font-family: arial, verdana, sans-serif;
font-style:normal;
font-weight:bold;
font-size: 14px;
padding:5px;
}
a.photo_maxi_back
{
color:#ffff33;
text-decoration:overline underline;
}
a.photo_maxi_back:hover
{
color:#ffcc00;
text-decoration:overline underline;
}


merci d'avance

JMM
Modifié par liege67 (31 Dec 2005 - 11:01)
Oui et non. En fait, il faut plusieurs déclarations pour couvrir l'ensemble des navigateurs.

Par exemple :

filter: alpha(opacity=50); /* IE */
-moz-opacity: 0.5; /* Mozilla */
opacity: 0.5; /* CSS3 */
-khtml-opacity: .5; /* Safari */

Complément : http://www.quirksmode.org/css/opacity.html

Sinon il y a les .png Smiley lol
Modifié par Stephan (31 Dec 2005 - 04:04)
Stephan a écrit :
Oui et non. En fait, il faut plusieurs déclarations pour couvrir l'ensemble des navigateurs.

Par exemple :

filter: alpha(opacity=50); /* IE */
-moz-opacity: 0.5; /* Mozilla */
opacity: 0.5; /* CSS3 */
-khtml-opacity: .5; /* Safari */



bonjour

ca fonctionne, avec le code suivant, sur IE 6 et FX 1.07, mais pas sous Opéra ... comme d'autres fonctionnalités d'ailleurs (dont AJAX)
L'image est une image avec la couleur désirée, utilsée en background, dans un DIV vide


	// on affiche le bandeau vert
	echo "<div id='photo_maxi_top_banner' >";
	echo "";
	echo "</div>";






#photo_maxi_top_banner{
position:absolute; 
left:180px;
top:85px;
width:800px;
height:25px;
z-index:25;
visibility: visible;  background-image: url(top_photo_maxi.gif);
filter: alpha(opacity=50); 	/* IE */
-moz-opacity: 0.5; 		/* Mozilla */
opacity: 0.5; 			/* CSS3 */
-khtml-opacity: .5; 		/* Safari */
}


le résultat ici
Sujet clos
Aller à