web-dev-qa-db-fra.com

Créer un div non transparent au-dessus de l'élément parent transparent

EDIT: Changement de titre pour être correct

J'essaie de simuler une fenêtre contextuelle modale dans tout le HTML et le CSS et j'ai un peu de malchance avec un seul élément de ce que je fais. Je veux que le div le plus interne, celui avec le contenu, ne soit pas opaque comme l'est la bordure, mais peu importe ce que j'essaye avec le CSS, je ne peux pas le faire fonctionner. Voici le code:

Le CSS

.modalBackground {
    background-color:Gray;
    filter:alpha(opacity=70);
    opacity:0.7;
}

Le HTML

  <table style="height: 100%; width: 100%; position: fixed; top: 0; left: 0;"><tr><td class="modalBackground">
    <div style="display: table; height: 40px; width: 150px; position: fixed; overflow: hidden; 
        top: 40%; margin-top: -50px; left: 50%; margin-left: -75px; padding-left: 30px;
        border: solid 1px navy; background-color: White;">
        <div style="#position: absolute; #top: 50%; display: table-cell; vertical-align: middle;">
            <div style="#position: relative; #top: -50%;"
                ><asp:Image runat="server" ImageUrl= "~/images/indicators/indicatordark.gif" /> working...</div>
        </div>
    </div></td></tr></table>

J'arrive à la fin de mon esprit là-dessus. Je ne suis en aucun cas un gourou du HTML ou du CSS, donc une explication des raisons pour lesquelles la solution fonctionne serait grandement appréciée.

htmlcssopacity
17
Payton Byrd

Réponse mise à jour

La meilleure façon de procéder maintenant est d'utiliser les couleurs rGBA. Cela ne fonctionnera pas pour les navigateurs plus anciens, mais vous pouvez laisser le design se dégrader gracieusement en leur donnant simplement une couleur unie. Exemple:

CSS

.parent {
    background: gray; /* older browsers */
    background: rgba(128,128,128,0.7); /* newer browsers */
}

.child {
    background: blue;
}

Réponse originale

C'est est ennuyeux, mais CSS ne le permet pas. La définition de l'opacité pour un élément signifie qu'aucun élément enfant ne peut avoir une plus grande opacité. (100% d'opacité à 25% est-ce exact.)

Donc, une solution consiste à utiliser un minuscule PNG transparent comme image d'arrière-plan répétitive pour contourner ce problème. Le seul problème est IE6, et il y a ne excellente solution de contournement appelée supersleight .

(Mise à jour. Pensez que supersleight fonctionnera pour vous.)

Update Voici un cas de test très simple. Créez l'image (disons, un PNG avec un remplissage noir à 50%), puis créez ce fichier - enregistrez-les dans le même dossier. Si vous ne voyez pas de boîte mince avec un arrière-plan transparent derrière "trucs", c'est que vous n'enregistrez pas correctement le fichier ou que vous avez enregistré l'image ailleurs.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type="text/css">
body { background:white; }
#overlay { background-image:url(test.png); }
</style>
</head>
<body>
<div id="overlay">stuff</div>
</body>
</html>
23
user241244

Vous pouvez également le faire sans utiliser d'image transparente. Créez deux div distincts et utilisez z-index pour contrôler lequel est en haut

Exemple de code sur jsfiddle

14
smarty

Pourquoi ne pas utiliser la visibilité?

#parentDiv {
  visibility: hidden;
}

#childDiv {
  visibility: visible;
}
2
Zozos

Définir la couleur du div parent avec l'opacité avec une couleur rgba aurait plus de sens ici, car dans ce cas, l'élément enfant n'hériterait pas de l'opacité et ne serait pas transparent!

donc au lieu d'utiliser background-color: gray ou #something, utilisez quelque chose comme ceci:

.modalBackground {
  background-color: rgba(222, 222, 222, 0.7);
}

Comme cela, l'élément parent a une opacité de 0,7 mais ne l'hérite d'aucune div ou image ou quoi que ce soit à l'intérieur de ce div!

Il existe de nombreux générateurs rgba sur le net, essayez-les.

http://www.css3-generator.de/rgba.html

1
Pingbeat

Un PNG offrirait une meilleure compatibilité (vous devez utiliser une instruction filter: pour IE6), mais meilleure méthode CSS est juste à tiliser les couleurs RGBA ( par exemple background: rgba (0,0,0,0.5); vous obtiendra du noir à 50% alpha ), qui se débarrasse de toute opacité héritée =.

1
Nadav Daniel

Essaye ça

<div  class="" id="" style=" background: none repeat-x scroll 4px 3px lightgoldenrodyellow; left: 450px;  width:470px; text-align:center; height: 45px; position: fixed; 
  opacity:0.90;
    filter:alpha(opacity=40);
    z-index: 1000; ">
</div>
0
PPB

La façon dont j'ai pu mettre un div transparent derrière un div opaque était d'utiliser quelque chose comme:

`div.transparent-behind { opacity: 0.4; 
                      z-index: -1; }

 div.opaque-ontop { position: absolute; 
                top: (wherever you need it to fit)px;
                left: (some # of)px}'

où les div n'étaient pas imbriqués les uns dans les autres, mais l'un après l'autre dans le html

a du sens?

0
Ryan Greever