28172 sujets

CSS et mise en forme, CSS3

Bonjour,
Je souhaite faire des bloc div avec une image de fond semi transparente et garder le texte par dessus opaque

J'ai essayé d'utilisé directement un png semi transparent comme fond mais sans succès (ce qui serait plus simple !)

Pour l'instant je fais comme ceci :


div#conteneur {
	z-index:1;
	background: #FFFFFF url(Images/bgdiv.gif) ;
	-moz-opacity:0.75;
	opacity: 0.75;
	filter:alpha(opacity=75);
}
div#contenu {
	z-index:2;
	color:#FFFFFF;
}



<div id="conteneur" style="position: absolute; top: 80 px; left: 100 px;width: 103px; height: 61px"></div>
<div id="contenu"    style="position: absolute; top: 80 px; left: 100 px;width: 103px; height: 61px">test</div>



Bon le problème est que je n'ai pas envi de de me taper position absolute blablabla à chaque div...

Je suis sur qu'il y a une meilleur solution mais Google n'est pas mon ami aujourd'hui

Merci
Modifié par maxou59760 (05 Jun 2008 - 10:22)
Peut être qu'une petite démo aidera à la compréhension :


Voila comment faire pour avoir uniquement le fond des div transparent sans le texte ?

Merci
Modifié par maxou59760 (03 Sep 2013 - 11:58)
Salut,

Avec un fond transparent en png pas de problème Smiley cligne

div#conteneur {
	height:300px;
	width:200px;
	background:url(transparent.png) ;
	margin:50px 0px 10px 50px;
	float:left;
	z-index:1;
	color:#FFFFFF;

}
upload/5854-transparent.png
Ah ça fonctionne génial

Il faut peut être que je revois ma manière de créer des png alors ..

Grand merci en tout cas Smiley smile