Design - Insérer une image transparente sous du texte [Résolu]

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.

feldi · 12/01/2011, 15h48

Merci pour l'idée, je test ça dès que je peux.

feldi · 13/01/2011, 09h02

Merci ! Ta technique fonctionne !

10/01/2011, 13h14	#2
Nesmontou Modérateur Benjamin PREVOT Architecte de système d'information Inscription : septembre 2004 Messages : 1 568 Détails du profil Informations personnelles : Nom : Benjamin PREVOT Âge : 30 Localisation : France, Nord (Nord Pas de Calais) Informations professionnelles : Activité : Architecte de système d'information Secteur : Finance Informations forums : Inscription : septembre 2004 Messages : 1 568 Points : 2 493 Points : 2 493	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 ? __________________ Si vous ne pouvez expliquer un concept à un enfant de six ans, c'est que vous ne le comprenez pas complètement. Albert EINSTEIN F.A.Q. : Java, PHP, (X)HTML / CSS N'oubliez pas de cliquer sur le bouton Résolu en bas de page quand vous avez obtenu une solution à votre problème
	00

10/01/2011, 17h02	#4
Kuchiki Byakuya Nouveau Membre du Club Inscription : janvier 2007 Messages : 149 Détails du profil Informations forums : Inscription : janvier 2007 Messages : 149 Points : 39 Points : 39	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 )
	00

12/01/2011, 15h48	#7
feldi Membre régulier Nicolas Étudiant Inscription : mai 2010 Messages : 308 Détails du profil Informations personnelles : Nom : Nicolas Localisation : France Informations professionnelles : Activité : Étudiant Informations forums : Inscription : mai 2010 Messages : 308 Points : 74 Points : 74	Merci pour l'idée, je test ça dès que je peux.
	00

13/01/2011, 09h02	#8
feldi Membre régulier Nicolas Étudiant Inscription : mai 2010 Messages : 308 Détails du profil Informations personnelles : Nom : Nicolas Localisation : France Informations professionnelles : Activité : Étudiant Informations forums : Inscription : mai 2010 Messages : 308 Points : 74 Points : 74	Merci ! Ta technique fonctionne !
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email