Opacité de div

Version imprimable

04/05/2008, 21h52
lhpp

Opacité de div
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:

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 !
04/05/2008, 22h51
Er3van
Tu mets ton texte dans un <p> et tu changes ton css en :
Code:

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 ?
05/05/2008, 22h17
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...

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:

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:

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.

;)