Design - Insérer une image transparente sous du texte

**feldi** · 10/01/2011, 09h56

Bonjour,

afin d'améliorer le grapisme de mon site, je cherche à introduire des images sous du texte.

J'ai déjà trouvé des fonctions CSS pouvant rendre une image transparente :

Code css :

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

1
2
3
 
 opacity : 0.1; /* compris entre 0 et 1 */
 filter : alpha(opacity=10); /* utilisée pour IE */

mais je ne sais pas comment l'insérer (l'image) sous mon texte.

Si quelqu'un sait comment faire, je le remercie d'avance.

**Nesmontou** · 10/01/2011, 13h14

Bonjour,

Il faudrait jouer avec l'attribut position je pense.

Tu pourrais nous montrer le code que tu as déjà mis en place pour voir ce qu'il faudrait modifier ?

**feldi** · 10/01/2011, 13h20

Code php :

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
 
<?php
	include 'menu.php';
?>
<div id='accueil' align=center>
	<p>
	<h1 align=left> Présentation </h1> <br/>
	<hr/>
	<br/>
	<h2> Bienvenue sur le site des UME </h2> <br/><br/>
	<img src="images/presentation.bmp" alt="un logo des UME">   // -> c'est cette image
	Depuis 1909, la distribution de l'électricité sur la commune d'Erstein est gérée par sa régie : les "Usines Municipales d'Erstein"(UME).<br/>
	Son activité s'est par la suite diversifiée dans le domaine de l'eau potable et de l'éclairage public.<br/>
	De nombreuses communes environnantes nous ont ensuite confié l'exploitation de leurs réseaux.<br/>
	Ce mode de gestion public permet à nos usagers de bénéficier d'un service de proximité performant. <br/>
	Nous vous proposons ce site internet, dont le contenu va évoluer au fil du temps.<br/>
	Nous espérons qu'il vous permettra de mieux nous connaître, de mieux vous informer, et de nous transmettre vos observations.<br/>
	</p>
	<br/><br/>
</div>

Mais je ne peux pas utiliser de fichier .css dans mon cas, car la page menu.php (qui contient les balises <head>) est appelée à chaque page et je ne voudrais mettre que cette image en transparent derrière le texte.
A moins d'appeler l'image avec un class ou id pour la différencier des autres ?

J'ai pas d'idées pour le css de l'image, à vrai dire, j'ai commencé il n'y a pas si longtemps que ça.

Merci de me consacrer un peu de temps.

**Kuchiki Byakuya** · 10/01/2011, 17h02

mettre des positions en absolu peut te permettre de résoudre ce problème non ?
tu affiches l'image avant et tu écrit "par dessus" en affichant juste après.
( je dis peut être n'importe quoi mais si j'ai compris t'a question ça peu t'aider )

**feldi** · 11/01/2011, 09h47

Bon j'ai un peu avancé, j'ai commencé à bidouiller une ou deux propriétés du CSS :

Code html :

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

1
2
 
<img src="images/presentation.bmp" alt="un logo des UME" id="test">

Code css :

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

1
2
3
4
5
6
7
8
 
#test {
	align: center;
	opacity: 0.5; 
	filter: alpha(opacity=80); 
	position: absolute;
	right: 10px;
}

Donc, j'ai testé uniquement sous IE 8 pour le moment.
-> avec right > 0, l'image se met complètement à droite après le texte
-> sans right, l'image se met complètement à gauche avant le texte.

Je n'arrive pas à mettre l'image derrière le texte (pour le moment).

**H.Pascal** · 12/01/2011, 15h34

Donc si j'ai bien compris tu veux ecrire du texte par dessus un fond transparent.
Je te propose ceci :

Code :

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
 
<html>
	<head>
		<link rel="stylesheet" type="text/css" href="style.css"/>
		<meta charset="utf-8"/>
	</head>
 
<body>
 
	<div id="image_transparent">
		<div id="text">
			<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
			when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, 
			remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
			</p>
		</div>
	</div>
 
</body>
 
</html>

Pour le css :

Code :

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
 
body
{
	background: #121212;
}
 
#image_transparent
{
	width: 500px;
	height: 250px;
	background: url("tonImage.jpg") repeat;
	filter:alpha(opacity=60);
        opacity:0.6;
        position: relative;
}
 
#text
{
	width: 500px;
	height: 250px;
	text-align: center;
	position: absolute;
	top: 0;
	left: 0;
}
 
#text p
{
	color: white;
}

Donc tu crees un element div image_transparent de taille 500x250px qui contiendra ton image.
Ensuite à l'intérieur de image_transparent tu crees un autre div text de même taille par exemple ou de dimensions plus petites.
-Valeur de position : absolute, ton div text sera donc positionné relatif par rapport à son block parent: image_transparent, et cela te permet maintenant d'utiliser les propriétés top, right, left, ou bottom.
Ici je mets top: 0; et left: 0, ce qui aura pour effet de positionner div.text en haut à gauche par dessus div.image_transparent.

Design - Insérer une image transparente sous du texte

CSS

Vue hybride

Discussions similaires

Partager

Partager