Superposition d'images en CSS

Bonjour,

J'aimerais savoir s'il est possible, en CSS, de superposer 3 (ou plus) images ayant chacune des zones transparentes ...

L'idée étant de masquer une image, il faut qu'au moins une des images soit référencées par URL dans le fichier HTML. Tout le reste peut être placé dans la feuille de style.

Merci de votre attention

Juju

Salut.

jujuju a écrit :
L'idée étant de masquer une image, il faut qu'au moins une des images soit référencées par URL dans le fichier HTML.

C'est-à-dire ? J'espère qu'il ne s'agit pas encore une technique pour empêcher le téléchargement des images présentes sur le site ?

Sinon, tu devrais pouvoir les superposer en utilisant le positionnement absolu :

<div id="parent">
   <img id="img_1" class="superpose" src="..." alt="..." />
   <img id="img_2" class="superpose" src="..." alt="..." />
   <img id="img_3" class="superpose" src="..." alt="..." />
</div>

#parent {
   position: relative;
}
img.superpose {
   position: absolute;
   top: 25px;
   left: 30px;
}
#img_1 {
   z-index: 10;
}
#img_2 {
   z-index: 11;
}
#img_3 {
   z-index: 12;
}

Edit: désolé pour le code incomplet, petit souci de matos
Modifié par Thomas D. (02 Aug 2007 - 11:38)

Ok merci, je vais regarder ca ...

Non non, je voudrais réussir à faire deux choses :
- Appliquer des cadres graphiques à des photos (des png transparents au milieu)
- Composer une photo à partir de plusieurs éléments (genre, un dragon avec la tete vide et une photo d'identitee en dessous)

Est-ce que je peux faire du positionnement absolu au sein d'un cadre qui lui est positionné dans le flot ou relativement à d'autres objets ?

Et dans ce cas, est-ce que les attributs de positions sont calés sur le cadre parent ou sur la page dans l'absolu ?

Les éléments en absolu se placent par rapport à leur plus proche parent positionné. C'est pour cela que j'utilise

#parent {
   position: relative;
}

Le div #parent est ainsi positionné*, même s'il n'a pas bougé, et les images vont se placer à 25px du bord supérieur de #parent, et à 30px de son bord gauche.

* en gros, "positionné" signifie que la valeur de la propriété CSS "position" est différente de "static" (la valeur par défaut).

Partant de l'hypothese suivante :

Mon image la plus profonde est bien plus large que la surface d'affichage. Cette image est un img dans un calque que nous nommerons ici #parent.

Ce calque est en position relative. Dans ce calque deux autres calques.
pour faire simple ils ont une classe chacun .gauche et .droite

J'observe le comportement suivant :

Les images se supperposent comme je veux lorsque je me cale sur la gauche du claque parent.

.gauche {
  position:absolute;
  top:0px;
  left:0px;
}

Par contre, si je me cale sur la droite du calque parent comme ceci :

.gauche {
  position:absolute;
  top:0px;
  right:0px;
}

L'image superposée est placée à l'extrémitée droite de la fenetre, et pas à l'extremite droite de l'image contenue dans le calque parent.

Comment y arriver ?
Modifié par Jujuju (02 Aug 2007 - 14:59)

Bonjour et bienvenue parmi nous, Jujuju

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle.

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation