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 |
---|---|
Page : 1 | |
ptipilou | # Posté le 09/11/2009 à 09 h 48 |
Sus à la faute !![]() Messages : 9549 ![]() |
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 ?) |
biohazard2 | # Posté le 09/11/2009 à 12 h 34 |
![]() 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
|
mwsaz | # Posté le 09/11/2009 à 13 h 03 |
![]() Messages : 2323 ![]() |
Soit tu ne mets qu'une image en arrière-plan qu est la "fusion" des deux précédentes, soit
Code : HTML <!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 ! ![]() 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é). |
ptipilou | # Posté le 09/11/2009 à 13 h 22 |
Sus à la faute !![]() Messages : 9549 ![]() |
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 ?) |
mwsaz | # Posté le 09/11/2009 à 13 h 22 |
![]() Messages : 2323 ![]() |
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 ? ![]() 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
|
Savageman | # Posté le 09/11/2009 à 13 h 49 |
Ex-administrateur![]() Messages : 4236 ![]() |
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.
![]() |
ptipilou | # Posté le 09/11/2009 à 14 h 25 |
Sus à la faute !![]() Messages : 9549 ![]() |
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 ! ![]() 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 ? ![]() Cauchemar orthographique (qui a dit sadique ?) |
Prokopy | # Posté le 09/11/2009 à 18 h 26 |
Boarff…![]() 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 ![]() 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 ? |
ptipilou | # Posté le 09/11/2009 à 18 h 40 |
Sus à la faute !![]() Messages : 9549 ![]() |
> 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 ?) |
Prokopy | # Posté le 09/11/2009 à 18 h 53 |
Boarff…![]() 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
|
Savageman | # Posté le 09/11/2009 à 19 h 26 |
Ex-administrateur![]() Messages : 4236 ![]() |
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 |
biohazard2 | # Posté le 09/11/2009 à 19 h 57 |
![]() 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 |
ptipilou | # Posté le 09/11/2009 à 20 h 16 |
Sus à la faute !![]() Messages : 9549 ![]() |
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