Aller au menu - Aller au contenu

Centre d'aide Vous êtes ici : zCorrecteurs.fr > Les forums > Espace public > La cafétéria > CSS et superposition d'images > Voir le sujet

CSS et superposition d'images

Possible ?

Page : 1 
Auteur Message
0 membre et 1 visiteur.
Page : 1 
Hors ligne ptipilou # Posté le 09/11/2009 à 09 h 48
Sus à la faute !
Avatar de ptipilou
Messages : 9549
Groupe : Administrateurs
Bonjour à tous.

Est-ce que l'on peut mettre deux images superposées en fond de page web ?
L'idée serait de mettre une première image, puis une seconde dont la transparence (pas totale) permettrait de laisser voir la première...

Merci pour vos contributions ! ;)

Cauchemar orthographique (qui a dit sadique ?)
 
Hors ligne biohazard2 # Posté le 09/11/2009 à 12 h 34
Avatar de biohazard2
Messages : 10
Membres
Salut,

On ne peut pas mettre deux images en background de la même balise. C'est prévu avec le CSS3 mais pas encore implémenté. La technique habituelle dans ce cas consiste à mettre une image en background de <body> et l'autre en background d'une balise block dont la taille est celle de la page (<div id="global">).

Je viens de penser au fait que l'on pourrait p-ê utiliser <body> et <html> pour les deux backgrounds, sans passer par une <div> supplémentaire, mais ce n'est qu'hypothétique ; je n'ai jamais essayé cette méthode.

Bonne journée,
Biohazard2
Modifié le 09/11/2009 à 12 h 37 par biohazard2
 
Hors ligne mwsaz # Posté le 09/11/2009 à 13 h 03
Avatar de mwsaz
Messages : 2323
Groupe : zAnciens
Soit tu ne mets qu'une image en arrière-plan qu est la "fusion" des deux précédentes, soit
Code : HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE  [...]>
<html [...]>
  <head>
  <style type="text/css">
    html {
      background: url('image1.jpg') no-repeat;
    }
    body img.transparent {
      position: absolute;
      top: 0px;
      left: 0px;
      opacity: 0.5;
    }
  </style>
  </head>
  <body>
     <img class="transparent" src="image2.jpg" alt="Fond" />
     
     <!-- La page en elle-même ici -->
     Plop ! :)
  </body>
</html>


J'ai placé le CSS dans la balise <head> mais tu peux bien sûr le mettre dans un fichier css à part (c'est même conseillé).
 
Hors ligne ptipilou # Posté le 09/11/2009 à 13 h 22
Sus à la faute !
Avatar de ptipilou
Messages : 9549
Groupe : Administrateurs
La solution peut être aussi, comme on me l'a conseillé ailleurs, de superposer deux blocs (de même dimension, alors ?) et de leur appliquer à chacun un background différent.

Cauchemar orthographique (qui a dit sadique ?)
 
Hors ligne mwsaz # Posté le 09/11/2009 à 13 h 22
Avatar de mwsaz
Messages : 2323
Groupe : zAnciens
Mais dans ce cas, tu ne peux pas définir une opacité différente pour le bloc "transparent".

PS : Ah, la deuxième image est déjà transparente ? :D
la première sur la balise html, et la seconde sur la balise body alors oui.
Modifié le 09/11/2009 à 13 h 23 par mwsaz
 
Hors ligne Savageman # Posté le 09/11/2009 à 13 h 49
Ex-administrateur
Avatar de Savageman
Messages : 4236
Groupe : zAnciens
Si la transparence est "fixe", mieux vautcombine directement les 2 images avec l'effet de transparence déjà présent. C'est plus optimisé et plus portable. ;)
 
Hors ligne ptipilou # Posté le 09/11/2009 à 14 h 25
Sus à la faute !
Avatar de ptipilou
Messages : 9549
Groupe : Administrateurs
Savage, tu veux dire que la superposition soit faite dans la même image ?
Dans l'absolu, pourquoi pas, mais il faut faire ça à chaque nouvelle image ! Je te rappelle qu'il me faut une image différente (la première) par page... et que la deuxième, elle, est identique à toutes les pages, si je n'ai pas été clair !

Image utilisateur
Du reste, et en dehors de la question, comment modifier l'apparence d'un lien (un élément du menu, ici) qui sera partie d'un cadre non rectangulaire ?

Je m'explique : la deuxième image, qui aura une transparence colorée, laissera passer la première image. Elle est composée d'une forme grisée et transparente, sur laquelle je veux incorporer le nom de chaque élément du menu (les liens vers les pages suivantes). Je veux aussi que le fond (gris) de cet élément puisse changer au passage de la souris. Je crois avoir vu sur ce site que cela était réalisable... Pour un bête bouton rectangulaire indépendant du fond, c'est simple : l'image de fond de ce lien change du tout au tout. Mais pour que la zone où se trouvera ce lien change, mais ne destructure pas le reste de la forme... dois-je modifier toute la forme ? o_O

Cauchemar orthographique (qui a dit sadique ?)
 
Hors ligne Prokopy # Posté le 09/11/2009 à 18 h 26
Boarff…
Avatar de Prokopy
Messages : 157
Membres
Bonjour à tous,

Ptipilou, pour ce qui est de l'image de fond, je reprends l'idée de Savageman.
Mais comme, si j'ai bien compris, tu veux utiliser des images différentes à chaque fois, tu peux toujours te faire un petit script en PHP qui te fusionnera tes deux images (à moins que tu ne sois allergique à PHP, on ne sait jamais :D ).
Quant au problème de lien, je ne comprends pas très bien. Tu veux dire que tu veux que le fond ton lien change si on passe la souris dessus, mais que celui-ci n'a pas une forme rectangulaire, mais plutôt arrondie, c'est ça ?
 
Hors ligne ptipilou # Posté le 09/11/2009 à 18 h 40
Sus à la faute !
Avatar de ptipilou
Messages : 9549
Groupe : Administrateurs
> Prokopy : pas la peine de parler de PHP, je ne m'y suis pas encore mis !

Pour ce qui est des liens, jette un oeil à l'image que j'ai inséré dans mon message. Dans la partie grisée à gauche, tu vois ce qui doit devenir le menu (j'ai fait classique, hein). Lorsque la souris va aller s'y balader, j'aimerais que le grisé (sous forme de rectangle, à gauche, en haut, en bas mais pas à droite, puisque ce n'est pas un côté droit) change d'apparence : que le fond par exemple soit d'une autre couleur, le texte de même. Pour cela je crois savoir qu'il me faut "découper" à l'aide de mon logiciel de traitement d'image la partie que je souhaite voir changer d'apparence, créer un "clone" de cette partie, et faire pointer sur cette nouvelle image un :hover pour obtenir l'effet que je veux.

Grosso-modo, voilà ce que j'ai retenu d'un tuto sur Alsacreations.
Est-ce que je suis dans le vrai ?

Cauchemar orthographique (qui a dit sadique ?)
 
Hors ligne Prokopy # Posté le 09/11/2009 à 18 h 53
Boarff…
Avatar de Prokopy
Messages : 157
Membres
Donc le principe serait de changer le background-image via un :hover , et que l'image en question soit adaptée à la forme de ton menu pour ne pas le déformer. Ça m'a l'air de tenir debout. :)

Edit : euh je viens de m'en rendre compte, mais "l'écrigraphe", ça ne serait pas un peu un pléonasme ? ^^
Modifié le 09/11/2009 à 19 h 34 par Prokopy
 
Hors ligne Savageman # Posté le 09/11/2009 à 19 h 26
Ex-administrateur
Avatar de Savageman
Messages : 4236
Groupe : zAnciens
Si une des images change sur toutes les pages, alors tu peux en utiliser 2 à chaque fois. Je ne sais pas trop ce que ça peut donner niveau compatibilité, mais il n'y a pas de raison que ça soit mauvais.

Pour le menu, tu as juste ! J'espère juste que tu ne veux pas de transparence sur le :hover
 
Hors ligne biohazard2 # Posté le 09/11/2009 à 19 h 57
Avatar de biohazard2
Messages : 10
Membres
Oui, c'est un bon choix. Créer les images au début est un peu répétitif, mais il n'y a pas d'autre technique pour obtenir cet effet (avec partie arrondie à droite et fond transparent).

A la limite, pour éviter le problème de préchargement des images, tu peux utiliser la technique de ? (je cherche le nom depuis 10 minutes, toujours pas trouvé :-/, c'est une technique qui rassemble plusieurs images en une et qui n'en affiche qu'une partie grâce à CSS). En fait, tu crée une image du menu "normal", une image du menu "survolé" et tu écris un peu de CSS. Le résultat serait le même qu'avec plusieurs images, mais sans le temps de chargement de l'image de chaque élément du menu.

Ah, et pour Alsacréations, mangez-en, c'est du bon !

Bonne soirée,
Biohazard2
 
Hors ligne ptipilou # Posté le 09/11/2009 à 20 h 16
Sus à la faute !
Avatar de ptipilou
Messages : 9549
Groupe : Administrateurs
L'écrigraphe, un pléonasme ? Non : un néologisme ! ^^

Edit : tu veux parler de la technique des portes coulissantes, biohazard2 ?
Modifié le 10/11/2009 à 12 h 25 par ptipilou

Cauchemar orthographique (qui a dit sadique ?)
 

Retour au forum La cafétéria ou à la liste des forums