[Résolu] Héritage indésirable...

Bonsoir,

Je suis confrontée à un problème d'héritage que je voudrais éviter, mais je ne sais pas comment faire.

A savoir, j'ai placé un arbre en filigrane dans la partie gauche de ma page.
C'est un background image avec une opacité de 0.1.
A l'intérieur de cette div #arbre, j'ai placé une div #contenu imbriquée, parce que je voudrais que du contenu textuel et iconographique apparaisse par dessus l'image de fond (l'arbre).

Cependant, mon contenu apparait en filigrane, puisqu'il est hérité de la div #arbre qui le contient...
Je ne sais pas comment empêcher ça...

Voici mon code :

HTML :

<div id="arbre">
               
            <div id="contenu">
                <p>Blabla</p>
                <p>Blablabla blablabla.</p>
            </div>
  
            </div>

CSS :

#arbre {
    display: inline-block;
    width: 800px;
    height: 800px;
    background-image: url(../img/tree.png);
    background-repeat: no-repeat;
    margin: 0 10px;
    opacity: 0.1;
}

#contenu {
    margin: 50px 10px;
    z-index: 10;
    opacity: 1;
}

Auriez-vous une idée pour contrer ce problème?

(J'ai lu ces sujets, mais je n'y trouve pas les réponses qui concernent mon problème spécifiquement :
http://forum.alsacreations.com/topic-4-38482-1.html
http://forum.alsacreations.com/topic-4-45875-1.html
http://www.alsacreations.com/tuto/lire/545-Comprendre-l-heritage-et-la-parente-des-styles-CSS.html )

D'avance, je vous remercie pour votre aide.
Modifié par Reka (15 Dec 2013 - 17:59)

En fait c'est assez logique comme soucis, si tu donnes une opacité à ton élément parent, de fait, tous les éléments enfant seront affectés par la valeur, et ca ne sert à rien d'essayer de mettre une opacité de 1 sur l'élément enfant (à part si tu voudrait encore contrôler une opacité sur celui-la) car ton élément enfant héritera quand même de l'opacité appliquée sur l'élément parent.

J'imagine qu'en fait tu souhaiterais simplement appliquer une opacité sur ton image de fond (tree.png) ?

Si tel est le cas, je réaliserai plutôt cette opération dans un logiciel de graphisme (ex: Photoshop) en l'enregistrant en png sur fond transparent pour éviter de devoir faire appel à la propriété opacity.

N'hésite pas non plus à jeter un œil sur:
http://www.alsacreations.com/article/lire/81-transparence-png-ie6.html
et
http://www.alsacreations.com/tuto/lire/909-CSS-transparence-couleur-rgba.html
Modifié par LuciferX (15 Dec 2013 - 20:54)

Bonjour,

il n'y a pas de moyen d'annuler cette opacité pour les éléments enfants : on peut la maintenir au même niveau mais pas revenir à l'opacité du parent de #arbre par exemple.

Deux solutions parmi d'autres :
- modifier l'image de fond pour en faire un vrai filigrane dans un logiciel de retouche et l'afficher telle quelle en CSS
- modifier le code HTML pour que #arbre et #contenu soit frères dans un parent disons #wrapper :

<div id="wrapper">
    <div id="arbre">
    </div>
    <div id="contenu">
        <p>Blabla</p>
        <p>Blablabla blablabla.</p>
    </div>
</div>

et utiliser une astuce propre au positionnement absolu pour qu'il ait la même taille que son parent :

#wrapper {
  position: relative;
}
#arbre {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0; /* IE7+ */
}
#contenu {
  position: relative;
}

EDIT: #contenu hérite de #wrapper mais plus de #arbre. Ce dernier peut donc avoir une opacité quelconque, c'est sans conséquence sur ses "voisins". Enfin quand je dis voisin, c'est voisins (frères) dans le code HTML, mais superposés visuellement puisque c'est le but de l'astuce...
Si #contenu est positionné en relatif, c'est pour apparaître au-dessus de #arbre et pas en-dessous. Un élément positionné en absolu apparaît toujours au-dessus d'un élément frère non-positionné, il faut donc également positionner ce dernier. Sans indiquer de z-index du tout, le dernier frère apparaît au-dessus comme on pourrait s'y attendre.
Modifié par Felipe (15 Dec 2013 - 19:18)

Merci LuciferX.

L'ennui est que j'ai déjà rendue diaphane mon image depuis Photoshop...
Mais que le résultat poussé depuis la CSS à coup d'opacity est bien meilleur.
Ou alors je dois prendre le fond + l'arbre dès le départ, mais l'image embarquée en full pèse nettement plus lourd qu'un petit carré de 50*50 qu'on place en background-repeat avec l'image de l'arbre en noir et blanc par dessus...

J'envisageais une autre alternative, mais qui ne me parait pas non plus optimale :
ce que je peux faire c'est mettre l'image dans le fichier html au lieu de la CSS (même s'il s'agit d'une image décorative) et appliquer l'opacité à l'image :
J'affecte un id à mon image et je la cible elle et elle seule...

Mais la question est de savoir alors s'il y a une astuce pour placer du contenu par dessus l'image en question... ?
Peut-être en recréant une div en position absolue qui recouvrirait l'image, mais j'ai toujours peur du résultat des absolute avec les différences de définition d'écran...

Vous en pensez quoi?

Merci encore.

Je viens de voir le message de Felipe après avoir posté le mien
Merci.

J'aurais tendance à aller vers la seconde option, donc...
Mais ma question des absolute tient toujours : casse tout ou casse pas tout en fonction des différences de résolutions d'écran?

J'ai édité le code CSS, j'avais oublié 2-3 "détails"

Ici #arbre fait la dimension de son parent #wrapper. Et #wrapper a la dimension de ces enfants encore dans le flux donc de #contenu. Si #contenu se comporte comme tu le souhaites, pas de souci avec le reste.
Pour des raisons d'image à ne pas couper, tu peux jouer avec min-height ou min-width sur #contenu (ou #wrapper), sur le padding, ...
Pour te rendre compte de ce qu'il se passe, outline: 1px solid red (ou dashed green, etc) est un outil très puissant ainsi que background-color: rgba()
Modifié par Felipe (15 Dec 2013 - 19:23)

Ok, j'ai adapté, et ça donne l'effet escompté.
Les min/max-height/width, il faudra que je revoie ça, je ne suis jamais trop sûre de ce que je fais en les utilisant. J'irai compulser un tuto pour mieux appréhender leur fonctionnement quand je fignolerai mon travail
Merci à vous !
Bonne soirée