CSS alphatranzparenz nicht an eingeschlossene container vererben

litterauspirna · 01.11.2011, 17:40

Hallo Leute,

ich hoffe der Titel ist mir gut gelungen, ich wusste nicht wirklich wie ihn beschreiebn sollte.

Ich habe einen DIV Container den ich mit CSS eine Tranzparenz verpasee. In dem Container ist dann ein weißer Container eingeschlossen.
Der weiße Container ist aber genauso tranzparent wie der schwarze.

Mein CSS

Code:

.edit_window
{
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: black;
    -moz-opacity: 0.7;
    opacity:.85;
    filter: alpha(opacity=85);
    font-size: 12px;
    font-family: Arial;
    color: #fff;
}

div#edit_content
{
    width: 500px;
    height: 400px;
    background-color: #fff; 
    margin-left: auto;
    margin-right: auto;
    margin-top: 100px;
    color: #000;
}

Und das kurze Stück HTML.

Code:

<div id="edit_window" style="display: none;" class="edit_window">
        <div id="edit_content">
                    
        </div>
</div>

Meine Frage wie kann ich es verhindern das der eingeschlossene Container die Tranzparenz vom Elterncontainer mit übernimmt?
Also nur der schwarze Container soll tranzparent sein und der weiße innen drin der soll ganz normal weiß sein.

Vielen Dank für eure helfenden Antworten.

Gruß der Litter

ChrisB · 01.11.2011, 17:52

Zitat:

Zitat von litterauspirna

ich hoffe der Titel ist mir gut gelungen, ich wusste nicht wirklich wie ihn beschreiebn sollte.

Und vorher mal googlen zu dieser schon vielfach diskutierten Thematik ging auch nicht …?

Zitat:

Meine Frage wie kann ich es verhindern das der eingeschlossene Container die Tranzparenz vom Elterncontainer mit übernimmt?

Gar nicht - opacity bezieht sich auf ein Element samt sämtlicher Inhalte.

Zitat:

Also nur der schwarze Container soll tranzparent sein und der weiße innen drin der soll ganz normal weiß sein.

Dann gebe den Hintergrund des äußeren als rgba-Farbwert an; ggf. noch per Hack o.ä. ein alphatransparentes Hintergrundbild für ältere Browser.

litterauspirna · 01.11.2011, 18:01

Zitat:

Zitat von ChrisB

Und vorher mal googlen zu dieser schon vielfach diskutierten Thematik ging auch nicht …?

Ich suche vorher immer selber, es sei denn ich weiß nicht nach was ich wirklich suchen soll. Und genau in dem Fall sind keine wirklichen Suchbegriffe eingefallen.

Da werde ich mal sehen wie ich das mache.

Danke trotzdem für deine Antwort.

ChrisB · 02.11.2011, 10:50

Zitat:

Zitat von litterauspirna

Ich suche vorher immer selber, es sei denn ich weiß nicht nach was ich wirklich suchen soll. Und genau in dem Fall sind keine wirklichen Suchbegriffe eingefallen.

Ach komm

https://www.google.com/search?q=opacity+kindelemente

tr0y · 02.11.2011, 16:03

Derweil des nichtmal gesucht werden müsste. Wenn ich ein Element um 40% verkleiner ist alles innenliegende auch 40% kleiner, sollte man wohl mit rechnen wenn man die Transparenz von einem Element um 50% erhöht alles inliegende wohl auch transparent ist, wär ja sonst sinnfrei wenn jedes innenliegende Element nachformatiert werden müsste.

ChrisB · 02.11.2011, 16:14

Oft gehen die Leute davon aus, dass opactiy vererbt werden würde.
(Ein kurzer Blick in die Spezifikation würde in so einem Fall aber Abhilfe schaffen.)

nikosch · 02.11.2011, 20:38

Zitat:

Derweil des nichtmal gesucht werden müsste. Wenn ich ein Element um 40% verkleiner ist alles innenliegende auch 40% kleiner,

Das Beispiel ist insofern schlecht gewählt, dass ich etwas, was einmal (semi)transparent ist, nicht mit Werten > 100% wieder super-opak machen kann.

mquadrat · 03.11.2011, 10:57

Zitat:

Zitat von tr0y

Derweil des nichtmal gesucht werden müsste. Wenn ich ein Element um 40% verkleiner ist alles innenliegende auch 40% kleiner, sollte man wohl mit rechnen wenn man die Transparenz von einem Element um 50% erhöht alles inliegende wohl auch transparent ist, wär ja sonst sinnfrei wenn jedes innenliegende Element nachformatiert werden müsste.

Background-Color?

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Dependency Injection Container	Anyone	PHP-Fortgeschrittene	33	16.06.2011 08:28
jQuery <div> Container generieren lassen ?	dreamcatcher	JavaScript, Ajax und mehr	5	23.02.2011 14:01
[Erledigt] Mehrere DIV Container mit einem Klick ändern (mit mehreren Request Aufrufe	Lebenssonde	JavaScript, Ajax und mehr	11	26.08.2010 09:01
Netz von Objekten mit Abhängigkeiten darstellen/zeichnen	serPHPico	PHP-Fortgeschrittene	12	25.08.2010 18:52
kürzeren div container authoatisch der höhe des contends anpassen	litterauspirna	HTML, Usability und Barrierefreiheit	15	29.07.2009 00:57
2 div Container immer gleich lang	Kein Genie	HTML, Usability und Barrierefreiheit	4	27.07.2009 13:38
DIV Container - Hintergrundgrafiken Bildschirmauflösungsanpassung	litterauspirna	HTML, Usability und Barrierefreiheit	5	18.06.2009 13:45
Links vom Untermenü in Container öffnen	Surfer	PHP Tipps 2008	0	27.12.2008 19:24
[CSS] Container in Container	Igäl	HTML, Usability und Barrierefreiheit	5	04.09.2007 11:29
CSS - Bild im div container überlappt andere container	Buschdieb	HTML, Usability und Barrierefreiheit	13	19.07.2007 23:17
IE6: Container mit Float dabei wird margin doppelt gewertet	DonTermi	HTML, Usability und Barrierefreiheit	1	11.01.2007 09:02
[CSS] Div container unsichtbar machen	I-Spy	HTML, Usability und Barrierefreiheit	24	05.03.2006 09:37
[Erledigt] Container im Firefox falsch dargestellt		HTML, Usability und Barrierefreiheit	27	15.08.2005 23:18
&lt;div&gt;- container vertikal auf seite zentrieren		HTML, Usability und Barrierefreiheit	3	08.05.2005 11:16

01.11.2011, 17:40
litterauspirna Erfahrener Benutzer Registriert seit: 24.04.2008 Beiträge: 3.172 PHP-Kenntnisse: Anfänger	CSS alphatranzparenz nicht an eingeschlossene container vererben Hallo Leute, ich hoffe der Titel ist mir gut gelungen, ich wusste nicht wirklich wie ihn beschreiebn sollte. Ich habe einen DIV Container den ich mit CSS eine Tranzparenz verpasee. In dem Container ist dann ein weißer Container eingeschlossen. Der weiße Container ist aber genauso tranzparent wie der schwarze. Mein CSS Code: .edit_window { position: absolute; top: 0px; left: 0px; background-color: black; -moz-opacity: 0.7; opacity:.85; filter: alpha(opacity=85); font-size: 12px; font-family: Arial; color: #fff; } div#edit_content { width: 500px; height: 400px; background-color: #fff; margin-left: auto; margin-right: auto; margin-top: 100px; color: #000; } Und das kurze Stück HTML. Code: <div id="edit_window" style="display: none;" class="edit_window"> <div id="edit_content"> </div> </div> Meine Frage wie kann ich es verhindern das der eingeschlossene Container die Tranzparenz vom Elterncontainer mit übernimmt? Also nur der schwarze Container soll tranzparent sein und der weiße innen drin der soll ganz normal weiß sein. Vielen Dank für eure helfenden Antworten. Gruß der Litter __________________ Aus dem Dynamo Lande kommen wir. Trinken immer reichlich kühles Bier. Und dann sind wir alle voll, die Stimmung ist so toll. Aus dem Dynamo Lande kommen wir. http://www.lit-web.de


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

02.11.2011, 16:03
tr0y Erfahrener Benutzer Registriert seit: 26.07.2010 Beiträge: 4.865 PHP-Kenntnisse: Fortgeschritten	Derweil des nichtmal gesucht werden müsste. Wenn ich ein Element um 40% verkleiner ist alles innenliegende auch 40% kleiner, sollte man wohl mit rechnen wenn man die Transparenz von einem Element um 50% erhöht alles inliegende wohl auch transparent ist, wär ja sonst sinnfrei wenn jedes innenliegende Element nachformatiert werden müsste. __________________ Lasse mir ohne Anwendung von Gewalt Dinge schenken, Amazon weiß darüber bald mehr.

02.11.2011, 16:14
ChrisB Moderator¹ Registriert seit: 28.03.2010 Beiträge: 7.470 PHP-Kenntnisse: Fortgeschritten	Oft gehen die Leute davon aus, dass opactiy vererbt werden würde. (Ein kurzer Blick in die Spezifikation würde in so einem Fall aber Abhilfe schaffen.) __________________ RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?