Wenn ein Html-Element in den meisten Browsern nur teilweise undurchsichtig ist, "erben" seine Kinder diese Undurchsichtigkeit. (Es ist nicht ganz Vererbung - richtiger ist, dass das gesamte Bild zusammengesetzt wird, einschließlich des Elternteils und seiner Kinder rekursiv, und dann wird die Deckkraft auf das Ganze angewendet).
Im IE8 (und ich würde annehmen, auch für frühere Versionen von IE), ist dies nicht immer, was mit Opazität passiert. Wenn die untergeordneten Elemente position:static haben (der Standard, wenn keine Position angegeben ist), dann funktioniert es wie oben beschrieben. Wenn die Position jedoch auf etwas anderes gesetzt ist (z. B. absolut oder relativ), dann ist das untergeordnete Element vollständig undurchsichtig.
Ich möchte wissen, wie ich die Deckkraft sowohl für das übergeordnete als auch für das untergeordnete Element korrekt einstellen kann, ohne das untergeordnete Element mit position:absolute zu verändern;
Hier ist ein Beispiel für das Problem. Der folgende Code soll einen durchscheinenden grauen Kasten mit einer durchscheinenden blauen Umgebung über einem vertikalen roten Balken erzeugen. Bei Firefox, Chrome usw. ist dies tatsächlich zu sehen. Im IE8 ist der blaue Kasten korrekt durchscheinend, aber der graue Teil ist undurchsichtig.
<!doctype html>
<html>
<head>
<style>
div.parentElem
{
background-color:#0000ff;
position: absolute;
left:75px;
top:75px;
width:300px;
height:225px;
opacity:0.5;
filter:alpha(opacity=50);
}
div.childElem
{
background-color:#808080;
position: absolute;
left: 10px;
right: 10px;
top: 10px;
bottom: 10px;
}
div.redBar
{
position: absolute;
left:150px;
top:50px;
height:350px;
width:25px;
background-color: #ff0000;
}
</style>
</head>
<body>
<div class="redBar"></div>
<div class="parentElem">
<div class="childElem"></div>
</div>
</body>
</html>Natürlich ist dies nur ein Beispiel - ich hätte auch ein einzelnes div mit blauem Rand und grauem Hintergrund verwenden können, um den gewünschten Effekt zu erzielen. Im realen Szenario bin ich Schichtung mehrere verschiedene divs, von denen jeder ein png Hintergrundbild dynamisch ein Bild zu bauen hat.
Mein erster Lösungsversuch bestand darin, die Deckkraft sowohl auf das übergeordnete Element als auch auf das untergeordnete Element anzuwenden, indem ich entweder den Filter des untergeordneten Elements auf alpha(opacity=50) setzte oder einfach filter:inherit; einstellte. Dies führt jedoch nicht zum gewünschten Ergebnis, da es ein durchscheinendes blaues Rechteck mit einem durchscheinenden grauen Rechteck darüber erzeugt. Der leere Raum in der Mitte ist schließlich durchscheinend blau-grau, während er eigentlich durchscheinend grau sein sollte. Ebenso funktioniert es nicht, die Elemente zu Geschwistern zu machen. Jede Lösung muss die beiden Bilder zusammensetzen, bevor eine Transparenz auf irgendetwas angewendet wird.
Bei meiner Recherche habe ich einige Vorschläge gefunden, dass die Anwendung von zoom:1; oder float:none; auf das innere Element das Problem lösen könnte, aber beides hat bei mir nicht funktioniert.
Mein letzter Ausweg war, dem Kindelement position:static zu geben. Es ist eine ziemlich hässliche Lösung, aber was ich tun würde, um es auf das obige Beispiel anzuwenden, ist den Stil des Kind-Elements zu ändern, um wie aussehen:
div.childElem
{
background-color:#808080;
position:static;
margin-left:10px;
margin-right:10px;
height:205px;
margin-top:10px;
}Das ist eine ziemlich unschöne Lösung, denn das bedeutet, dass ich die Höhe des Objekts kennen muss. Außerdem muss ich in einem realen Fall, in dem ich mehrere verschiedene png's zusammenstelle und möchte, dass sie logische Geschwister sind, sie alle in eine verschachtelte Eltern-Kind-Enkel-Beziehung usw. setzen. Das hindert mich auch daran, Textelemente hinzuzufügen, außer ganz oben auf dem Stapel (dem innersten div), ohne die Positionierung durcheinander zu bringen. Es funktioniert aber, und es sieht in allen Browsern gleich aus.
Gibt es eine Möglichkeit, eine solche schreckliche Umgehung zu vermeiden und haben Deckkraft korrekt auf die untergeordneten Elemente, ohne dass die Position statisch? Danke!
