Opacité d'une image dans une conteneur semi-transparent

[Dualias]

Bonjour à tous,

J'utilise KompoZer 0.8b3 sous Windows 7 pour recréer totalement mon site perso généré avec iWeb sous l'OS X de base installé sur mon Mac...

J'ai un souci gênant avec les images et je ne suis pas encore un spécialiste du CSS.

Voulant retrouver le même design que ce que j'ai produit avec iWeb, c'est à dire des pages avec une image de fond et une zone principale grise semi-transparente au centre, recouvrant toute la page verticalement et large de 770 pixels, je n'ai trouvé comme astuce que de créer un conteneur "div" auquel j'ai associé la classe "gris" ayant une opacité de 0.942. Le reste de l'apparence de mes pages étant défini par une feuille externe.
Le problème c'est que si j'inclue une image dans ce "div", l'image elle même devient transparente... J'ai pourtant indiqué dans le style interne de celle-ci une opacité de 1 et j'ai pourtant lu ici et là qu'un style interne prévalait sur ce qui était ordonné dans une feuille liée...

Voici ce que ça donne : http://dualias.chez.com/KompoZer/accueil.html et voici ce que je voudrais obtenir (l'original) : http://dualias.chez.com/Accueil.html Cela vaut aussi pour la bannière d'ailleurs...

Comment puis-je faire s'il vous plait ?


Merci et bonne journée à vous !


P.S. : Bizarrement pas de problème avec IE...

[FF_Olivier]

Bonjour,

Pour le gris, essaie en utilisant les couleurs sous la forme rgba() plutôt que opacity, p.ex :

Code : Tout sélectionner

background-color: rgba(128,128,128,50)
/* opacity: 1 */

[Dualias]

Bonjour,

Pour le gris, essaie en utilisant les couleurs sous la forme rgba() plutôt que opacity, p.ex :

Code : Tout sélectionner

background-color: rgba(128,128,128,50)
/* opacity: 1 */

Merci d'avoir pris le temps de me répondre

J'ai dû mal m'exprimer, le fond gris a bien une "couleur de fond", en hexa (#212121), mais je souhaiterais qu'il soit aussi transparent, sans que ça influe sur l'opacité des images qu'il contient... J'ai fait un essai avec la propriété Z-Index en plaçant le fond et l'image en position relative et en attribuant une valeur comme indiqué ici : http://www.alsacreations.com/astuce/lir ... index.html mais pas de changement notable.

Je suis un grand débutant, je me demandais aussi s'il était normal de placer mon image ou un div quelconque où je veux en utilisant des retours à la ligne (<br>) jusqu'à obtenir le résultat voulu ?

[FF_Olivier]

J'ai dû mal m'exprimer, le fond gris a bien une "couleur de fond", en hexa (#212121), mais je souhaiterais qu'il soit aussi transparent, sans que ça influe sur l'opacité des images qu'il contient...

Il me semble que c'est exactement ce que je te propose avec rgba() : rgb pour les 3 couleurs, et a pour le pourcentage de transparence alpha de la couleur choisie.

rgba(33,33,33,50) pour le gris que tu as choisi, avec une transparence de 50%. Tu ne mets pas opacity (il vaut 1 par défaut), et les images ne seront pas affectées.

Je suis un grand débutant, je me demandais aussi s'il était normal de placer mon image ou un div quelconque où je veux en utilisant des retours à la ligne (<br>) jusqu'à obtenir le résultat voulu ?

Non, cela se positionne avec les margin, les padding, les position fixed, absolute ou relative...

[Dualias]

Il me semble que c'est exactement ce que je te propose avec rgba() : rgb pour les 3 couleurs, et a pour le pourcentage de transparence alpha de la couleur choisie.

rgba(33,33,33,50) pour le gris que tu as choisi, avec une transparence de 50%. Tu ne mets pas opacity (il vaut 1 par défaut), et les images ne seront pas affectées.

D'accord. Par contre là je me heurte à un problème venant de Kompozer lui-même... Je suis retourné à OS X dans lequel je l'utilise (les paramètres sont exactement les mêmes) et quand j'édite ces propriétés dans Cascade, que ce soit dans l'onglet "Général" ou dans l'onglet "Fond", cela ne s'applique pas. Je fais OK puis j'y retourne, la ligne suivante a disparue !

Code : Tout sélectionner

background-color: rgba(33,33,33,50);

Pareil si j'ouvre la feuille dans KompoZer lui même ! (Pour info la version 0.8b3)
Faut il que j'édite la feuille de style dans un éditeur externe ?

Non, cela se positionne avec les margin, les padding, les position fixed, absolute ou relative...

Houla ! Alors j'ai du boulot ! Façon de parler Je vais essayer cette méthode...

[chinon37]

Non, cela se positionne avec les margin, les padding, les position fixed, absolute ou relative...

Houla ! Alors j'ai du boulot ! Façon de parler Je vais essayer cette méthode...

Tout cela peut se faire très facilement avec l'éditeur css de KompoZer, onglet Boite
Margin =marges, padding = espacements (marges intérieures au bloc)
position fixed= fixe, absolute = absolue etc...

[Dualias]

Tout cela peut se faire très facilement avec l'éditeur css de KompoZer, onglet Boite
Margin =marges, padding = espacements (marges intérieures au bloc)
position fixed= fixe, absolute = absolue etc...

Oui merci Chinon ! J'en fait l'expérience et je commence a apprivoiser le système...
Je m'attèle à refaire toutes mes pages comme ça.

Une question : le seul moyen que j'ai trouvé pour superposer du texte sur une image est de mettre le texte en position absolue et de lui appliquer une marge haut négative, genre "-330px"... Ça se fait couramment ça ?

Je sors un peu du sujet mais je n'ai pas trouvé de moyen simple d'inclure un div dans un autre notamment quand le div parent est une image... Je bloque là-dessus

[chinon37]

Une question : le seul moyen que j'ai trouvé pour superposer du texte sur une image est de mettre le texte en position absolue et de lui appliquer une marge haut négative, genre "-330px"... Ça se fait couramment ça ?

Non, ça ne se fait pas du tout comme ça. Pour superposer du texte à une image, on positionne l'image en fond de bloc (propriété css background-image qui s'applique toute seule avec l'éditeur css> onglet fond... image) et on rentre le texte simplement dans le bloc

Je sors un peu du sujet mais je n'ai pas trouvé de moyen simple d'inclure un div dans un autre notamment quand le div parent est une image... Je bloque là-dessus

Un div parent ne peut pas être une image car il s'agit de 2 blocs bien distincts: soit c'est un div, soit c'est une image. Un div est un conteneur générique.
On ne peut pas inclure un div dans une image. la balise html img définie l'image elle-même et non un boc dans lequel est l'image. La seule solution pour inclure quelque chose dans une image, c'est un logiciel de retouche photo comme The Gimp!

[Dualias]

Non, ça ne se fait pas du tout comme ça. Pour superposer du texte à une image, on positionne l'image en fond de bloc (propriété css background-image qui s'applique toute seule avec l'éditeur css> onglet fond... image) et on rentre le texte simplement dans le bloc

De retour D'accord mais que faire si je souhaite placer le texte au pixel près quelque part dans l'image mais pas forcément au centre comme sur cette page (crée avec KompoZer) ? :http://dualias.chez.com/KompoZer/ecrits.html

Un div parent ne peut pas être une image car il s'agit de 2 blocs bien distincts: soit c'est un div, soit c'est une image. Un div est un conteneur générique.
On ne peut pas inclure un div dans une image. la balise html img définie l'image elle-même et non un boc dans lequel est l'image. La seule solution pour inclure quelque chose dans une image, c'est un logiciel de retouche photo comme The Gimp!

Ça me parait étrange ! C'est justement la technique que j'utilise pour superposer du texte à une image... Quel est le problème ? Compatibilité du code ou règle respectée par les puristes ? J'inclue toutes mes images dans un div. Par exemple les icônes de téléchargement sur cette page : http://dualias.chez.com/KompoZer/musique.html
Quelle est la différence ?

[chinon37]

je n'ai pas trouvé de moyen simple d'inclure un div dans un autre notamment quand le div parent est une image

et

J'inclue toutes mes images dans un div

Il me semble que tu ne parles pas de la même chose dans ces deux citations!
Bien sûr que tu peux inclure tes images dans un div, aucun souci, mais quand je lis quand le div parent est une image, je dis que ce n'est pas possible qu'un div soit une image.

[Dualias]

Il me semble que tu ne parles pas de la même chose dans ces deux citations!
Bien sûr que tu peux inclure tes images dans un div, aucun souci, mais quand je lis quand le div parent est une image, je dis que ce n'est pas possible qu'un div soit une image.

D'accord, je me suis mal exprimé. je pensais à ce que j'ai fait sur les pages dont j'ai donné l'URL précédemment... pour celle-ci http://dualias.chez.com/KompoZer/musique.html, j'ai crée un div contenant l'image de la partition contenant lui-même d'autres div, dont des images (petites icônes), les lecteurs dewplayer...

Dans ce cas, je suppose que je ne peux pas utiliser une image de fond, la partition, background-image du div conteneur de la partition duquel j'aurais supprimé la balise img contenant la partition... Je parle de partition musicale hein, pas de confusion ! Je ne suis pas sur un forum sur les systèmes de fichiers

Je crois que le code du div en question serait plus parlant :

Code : Tout sélectionner

<div style="margin-top: 140px; position: relative; margin-left: 59px; margin-right: 59px;" class="partition"><img style="border: 2px dotted rgb(66, 66, 66); width: 651px; height: 845px;" alt="Partition" src="images/partition.png"><br>
<div style="text-align: center; width: 502px; position: absolute; z-index: 4; margin-left: 75px; margin-top: -100px;" class="description">D’autres expérimentations à venir...</div>
<div style="margin-top: -200px;" class="description">Un gospel ghanéen
interprété par l’amie de mon père. Un enregistrement pour lequel je ne
suis intervenu qu’en tant qu’ingénieur du son.</div>
<div><object style="position: absolute; margin-left: 229px; margin-top: -250px; z-index: 4;" type="application/x-shockwave-flash" data="dewplayer/dewplayer.swf" id="dewplayer" name="dewplayer" height="20" width="200">
<param name="wmode" value="transparent"><param name="movie" value="dewplayer.swf">
<param name="flashvars" value="mp3=son/meanyobremabi-vera.k.mp3&showtime=1"><br>
</object></div>
<div style="position: absolute; z-index: 4; margin-top: -280px; margin-left: 397px;"><a href="son/meanyobremabi-vera.k.mp3"><img style="border: 0px solid ; width: 16px; height: 16px;" alt="Télécharger" title="Télécharger le morceau" src="images/document-save.png"></a><br>
</div>
<div style="font-size: 0.9em; font-family: Verdana; position: absolute; z-index: 4; margin-left: 276px; margin-top: -280px;">Meanyobremabi<br>
</div>
<div style="position: absolute; margin-left: 397px; margin-top: -530px;"><a href="son/the-look-of-love-dualias-recorded@home.mp3"><img style="border: 0px solid ; width: 16px; height: 16px;" alt="Télécharger" title="Télécharger le morceau" src="images/document-save.png"></a><br>
</div>
<div style="position: absolute; width: 170px; margin-left: 241px; margin-top: -350px;">

<hr style="width: 100%; height: 2px;"><br>
</div>
<div style="margin-top: -450px;" class="description">Une
reprise de ce standard à la manière de Dusty Springfield. Le challenge
consistait à reconstituer l’atmosphère d’un concert acousique dans une
petite salle, caf’ conc’ ou autre bar, l’enregistrement de ma voix
s’étant effectué... dans ma chambre !<br>
</div>
<div><object style="position: absolute; margin-left: 229px; margin-top: -500px; z-index: 4;" type="application/x-shockwave-flash" data="dewplayer/dewplayer.swf" id="dewplayer" name="dewplayer" height="20" width="200">
<param name="wmode" value="transparent"><param name="movie" value="dewplayer.swf">
<param name="flashvars" value="mp3=son/the-look-of-love-dualias-recorded@home.mp3&showtime=1"><br>
</object></div>
<div style="font-size: 0.9em; font-family: Verdana; position: absolute; z-index: 4; margin-left: 264px; margin-top: -530px;"><a href="son/the-look-of-love-dualias-recorded@home.mp3" target="_blank">The
Look Of Love</a></div>
<div style="position: absolute; width: 170px; margin-left: 241px; margin-top: -600px; z-index: 4;">
<hr style="width: 100%; height: 2px;"><br>
</div>
<div><object style="position: absolute; margin-top: -730px; margin-left: 229px; z-index: 4;" type="application/x-shockwave-flash" data="dewplayer/dewplayer.swf" id="dewplayer" name="dewplayer" height="20" width="200">
<param name="wmode" value="transparent"><param name="movie" value="dewplayer.swf">
<param name="flashvars" value="mp3=son/instru-test.mp3&showtime=1"><br>

</object></div>
<div style="margin-top: -680px;" class="description">Mon tout premier
morceau. Un essai comme son nom l’indique.<br>
</div>
<div style="position: absolute; margin-top: -760px; margin-left: 370px;"><a href="son/instru-test.mp3" target="_blank"><img style="border: 0px solid ; width: 16px; height: 16px;" alt="Télécharger" title="Télécharger le morceau" src="images/document-save.png"></a></div>
<div style="font-size: 0.9em; font-family: Verdana; position: absolute; z-index: 4; margin-top: -760px; margin-left: 280px; color: white;"><a href="son/instru-test.mp3" target="_blank">Instru' test</a></div>

</div>

Le plus simple étant quand même d'ouvrir la page distante dans ton KompoZer !