Discussion :

[lhpp]

Bonjour,

Mon site se présente comme l'imbrication de plusieurs div comme suit :

div 1 : affichage de l'image de fond du site
div 2 : affichage d'un fond blanc avec opacité à 90%
div xxx : images, texte ....


J'ai placé l'opacité de la div2 à 90% pour que l'image du fond soit visible sur toute la page, mais qu'on puisse écrire du texte dessus. (cela a l'effet de blanchir l'image).

Pour l'opacité, j'ai utilisé le code css suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
.contenu
{
        filter:Alpha(opacity=85);
	-moz-opacity:0.85;
	opacity: 0.85;
}

Maintenant, mon problème est que lorsque j'affiche des images dans les divs incluses dans la div2, elles héritent de cette opacité. Je voudrais que mes images soit en opacité 1.

J'ai essayé de le faire dans le css pour les div des images, mais ca ne fonctionne pas....

Merci de votre aide !

[Er3van]

Tu mets ton texte dans un <p> et tu changes ton css en :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
.contenu p
{
        filter:Alpha(opacity=85);
	-moz-opacity:0.85;
	opacity: 0.85;
}

Et logiquement ça devrait être bon, non ?

[lhpp]

non ca n'est pas bon de faire comme cela. Cela ne rendrait transparent que les endroits de texte, hors je souhaite mettre toute la div 2 en transparence.

J'ai plus ou moins triché en réalisant une image png de transparence 85% et en l'appliquant en tant que background à la div2. Ca reste moins propre que l'opacité, mais apparemment, on ne peut déshériter les enfants de l'opacité des parents...

[hellspawn_ludo]

Bonjour,

Si tu veux une opacité de 1 sur toutes tes images de ta div2, déclare une class dans tes div images.

Exemple :

HTML

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
    <div id="conteneur">
 
        <p>1er ligne de texte</p>
 
        <div class="divImage">
            <img src="UneImage.jpg" />
        </div>
 
        <p>2nd ligne de texte</p>
 
    </div>

CSS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
    #conteneur  {   background-color    :   green;
                    width               :   200px;
                    height              :   200px;
                    filter              :   alpha(opacity=85);
                    -moz-opacity        :   .85;
                    opacity             :   .85;
                    -khtml-opacity      :   .85;
                 }
 
    .divImage   {   position            :   relative; /* Impératif de positionner l'image en relative ou absolute */
                    filter              :   alpha(opacity=100);
                    -moz-opacity        :   1;
                    opacity             :   1;
                    -khtml-opacity      :   1;}

Ainsi, tes textes auront une opacité de 85% et les images de 100%.

En revanche, pense à positionner le .divImage car si tu ne le fais pas, tes images auront l'opacité définit dans #conteneur.

En espérant que ça puisse t'aider.