Discussion :

[johnjohn91]

Bonjour tout le monde,
Je ne parviens vraiment vraiment pas à créer un fond transparent et avoir par dessus du texte et une image opaque. J'ai suivi des tutos, mais rien, la typo et l'image reste liés au conteneur.
Je vous joins le code:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<div id='content'>
	<a href='http://website.org'</a></p>
		<div id='illu' style=' left:5px; top:10px; position: relative;' >
			<img src="img-accueil.jpg" width="208px" height="76px" align="center" alt='img-accueil.jpg' >
        		<span class='vie'> blablabla
				<span class='contact'><a href='mailto:blabla@yahoo.fr'>CONTACTEZ-MOI</a> 	
            	</span>
		</div>	
</div>

suivi du CSS :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
div#content{
	background: red;
	height: 120px;
	width: 100%;
        margin: 0 0 0 0px;
        top: 0;
	position:fixed;
	z-index:4;
	filter:alpha(opacity=50);   /**Internet Explorer 6  */  
	-moz-opacity:0.5;           /**Mozilla 1.6 et infér.  */  
	 opacity: 0.5;               /**CSS3 et Mozilla récents */
}
 
.vie {
	font-family: Helvetica, sans-serif;
	font-size: 14px;
	line-height : 120%;
 	position:absolute;
	padding-left:10px;
	margin: 5px 0px; 
	width: 350px;
	z-index: 5;
	/** opacity*/
	filter:alpha(opacity=100);
	-moz-opacity:1.0;
	opacity: 1.0;   
}
 
 
.contact{
	color:blue;
	font-weight:bolder;
	font-size: 14px;
 	position:absolute;
	padding-left:330px;
	margin: -30px 0px; 
	width: 200px;
	z-index:5;
	/** opacity*/
	filter:alpha(opacity=100);
	-moz-opacity:1.0;
	opacity: 1.0;   
 
}
div#illu{
	z-index:5;
	 opacity
	filter:alpha(opacity=100);
	-moz-opacity:1.0;
	opacity: 1.0;  
}

Merci beaucoup
Johnjohn

[marco_fot_hxc]

Un petit tour sur les forums :
http://www.developpez.net/forums/d95...arant-contenu/

Bon courage