28172 sujets

CSS et mise en forme, CSS3

Problème d'opacité

Bonjour,

je voudrais imbriquer 2 listes avec des opacités différentes comme ceci :

<!DOCTYPE html>
<html>
<head>
<title> Opacity test</title>
</head>
<body>
    <ul id="ul2">
        <li style="opacity: 0.5">Main list
        <ul id="ul2-2">
            <span><li style="opacity: 1">Sub list</li></span>
        </ul>
        </li>
    </ul>
</body>
</html>


Le problème c'est que sous FF5 ou FF6 tout passe en opacité 0,5 comme si la liste "main" imposait son opacité malgré la redéfinition de la liste "sub" !

Bug de Firefox ou de "ma pomme" ?
Non, l'opacité de sub est bien de 0.5... par rapport au 0.5. Et de 1 par rapport au 1.
Exemple:
<!doctype html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <style type="text/css">
            body {
                background-color: #ffffff;
            }

            div {
                margin: 50px;
                padding: 50px;
            }

            #d10 {
                opacity: 0.5;
                background-color: #0000ff;
            }

            #d11 {
                opacity: 1;
                background-color: #ff0000;
            }

            #d12 {
                opacity: 0.5;
                background-color: #ff0000;
            }
        </style>
    </head>
    <body>
        <div id="d10">
            <div id="d11"></div>
            <div id="d12"></div>
        </div>
    </body>
</html>


La div marqué opacity 1 est en réalité plus claire que ce qu'elle ne devrait. En réalité, par rapport à la page, elle est d'opacité 0.5*0.5 (0.25) en principe. L'opacité est fonction de l'opacité du parent. Testes en changeant celle du parent à 1, tu le verras par toi-même.
C'est donc normal.
Hello Smiley smile

En fait l'opacité est hérité. Dans ton cas, ton 1er li à une opacité de 0.5, puis ton deuxième, une opacité de 1 de 0.5 (super claire), ce qui va te faire 0.5. Tu peux faire le test par exemple et donner à ton 2em li, une opacité de 0.8, ça te fera 0.8 de 0.5, etc. et ton 2em li sera plus clair que le premier.

A ma connaissance il n'existe aucune façon de renverser l'héritage (mais peut-être que d'autres ont trouvé), l'idée serait d'avoir une opacité plus haute que 1, mais ça n'existe pas.

Donc non ce n'est pas ta pomme ^^
Salut,

Tu aurais peut être pu effectuer une petite recherche avant...ce sujet à déjà abordé dans une sujet très complet. J'ai mis 2s sur google pour trouver le sujet, aller un petit effort, faut rechercher un peu avant de poster !

http://forum.alsacreations.com/topic-4-42748-1-Probleme-avec-opacity-et-div-enfant.html

L'opacité CSS est appliquée à tout les éléments enfants, impossible d'annuler une opacité pour un de ces enfants. Mais lis le post ci-dessus pour plus d'infos et de solutions.

A+
Modifié par Spacedementia (08 Sep 2011 - 16:37)
Merci de vos réponses.

J'ai bien compris qu'il multipliait les opacités mais pourquoi ?

Normalement l'héritage CSS ( pardon la cascade ) s’arrête dès qu'on redéfinit la propriété !
Tu rigole là ! Je viens de te donner un lien, la moindre des choses avant de poster à nouveau serait peut être de lire ce post et voir si tu n'as pas de réponse dans ce dernier ! Florent V à donner une explication...
Une solution, dans un sens. Si ton objectif est l'opacité du fond, tu peux utiliser les valeurs rgba.

background-color: rgba(0, 0, 255, 0.5);

Pour l'exemple que j'ai donné, par exemple.
Merci Lpu8er pour ta réponse. Smiley cligne
Mais pour moi ce sujet est clos, toutes les réponses que l'on vient de lui fournir son dans le post dont j'ai donné le lien ci-dessus. Toutes ces questions y ont été abordés, détaillés et résolues...
Sujet clos
Aller à