28173 sujets

CSS et mise en forme, CSS3

Bonjour,

je me permet tout d'abord de vous remercier pour ce site qui m'a rendu de nombreux services. Mais je vais encore avoir besoin d'aide.
En effet, je cherche à reproduire à peu près cet effet .
(à savoir mettre une photo en édito avec par dessus un calque opaque et par dessus du texte).
J'ai fais quelques essais :

#image_une{
               z-index:3;
               height:300px;
               width:400px;
}


.fondtexte{
display:block;
position:absolute;
top: 235px; 
left: 0px; 
width:380px;
height:80px;
border:none;
z-index:5;
vertical-align:bottom;
padding-left:10px;
padding-right:10px;
background:#0066FF;
filter: alpha(opacity=70); 	/* Opacité pour IE */
-moz-opacity: 0.70; 		/* Opacité pour IE (2°solution)*/
-khtml-opacity: 0.7; 		/* Opacité pour Mozilla */
opacity:0.7; 			/* Opacité pour Safari */
}


avec le code html :


<div id="image_une" >
	<img src="test.jpg" alt="" width="400" height="300" />
	<div class="fondtexte">
		Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam eget tellus quis augue tincidunt molestie. Nam gravida erat vitae mauris. Sed auctor urna ut magna. Donec urna arcu, ornare sit amet, tempor a, tempor at, diam. Nulla quis lacus id ligula suscipit dignissim. Sed dignissim. Duis ornare. Phasellus eget risus
			  
</div>		
</div>	


malheureusement le texte hérite également de l'opacité.

Je ne sais pas quelle méthode utiliser, pour faire cet effet, de façon propre...

Merci à vous.
tanek a écrit :
malheureusement le texte hérite également de l'opacité

C'est normal, c'est fait pour.
On pourra sans doute un jour utiliser des couleurs avec degré d'opacité directement dans la feuille de style, mais en attendant le plus sûr moyen d'avoir une couleur de fond translucide (et non pas opaque Smiley cligne ) est de passer par un PNG transparent.

Attention cependant: la transparence du PNG-24 (format PNG en couleurs RVB avec couche alpha) n'est pas supportée en natif par Internet Explorer 6.