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 | |
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 ?) |
Messages : 10 Membres |
|
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
<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é). |
|
Sus à la faute !
Messages : 9549 |
|
|
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. |
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.
|
|
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 ?) |
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 ? |
|
Sus à la faute !
Messages : 9549 |
|
|
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 ? 
|
|
Ex-administrateur
Messages : 4236 |
|
|
Messages : 10 Membres |
|
|
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 ? Cauchemar orthographique (qui a dit sadique ?) |
Retour au forum La cafétéria ou à la liste des forums