✔ transparentes DIV ohne transparente Schrift

[FunkyMonkey]

Hallo

ich habe einen DIV-Container mit Transparenz. In diesem befindet sich Text, der logischer weise ebenfalls transparent wird.

Genau das soll aber nicht sein. Nun überlege ich, wie man das mit CSS ganz ohne JavaScript hinbekommt. Man bräuchte 2 DIV-Container, wobei einer unter dem anderen liegt und somit transparent und den transparenten Hintergrund abbildet.

Das Problem liegt nun darin wie man 2 DIV-Container genau übereinander positionieren kann, ohne einen davon absolut zu positionieren. Wenn mich nicht alles täuscht ist das nicht möglich, weil das Layout mittig platziert ist.

Wenn ich mit relativer Positionierung arbeite, bleibt für das transparente Hintergrund-Div eine riesige Lücke im Fließtext.

Und ich bezweifle das es ratsam ist, mit position:absolute; left:50%; und entsprechendem margin zu arbeiten, um trotz der zentrierten Darstellung der Seite das DIV korrekt unter das andere zu bringen...

 

[Maik]

Hi,

setz doch einfach anstelle des Opacity-Filters ein halbtransparentes PNG-Hintergrundbild ein, das erspart dir den zweiten DIV-Container.

 

[FunkyMonkey]

die PNG's sind nett, aber funktionieren leider nicht richtig im MSIE... und JavaScript hat auch nicht jeder aktiviert, damit die "Bugfix-Methoden" funktionieren

 

[Maik]

Dein Einwand betrifft aber nur die älteren IE-Versionen, denn der aktuelle IE7 unterstützt nun das PNG-Format, und Cross-browser semi-transparent backgrounds funktioniert selbst bei deaktiviertem Javascript.

 

[zeugwart]

Hallo,

Wollte schon genau die gleiche Frage stellen!
Warum kann man nicht ainfach die Frage beantworten (Immer diese halbfertigen Threads, die man massenhaft findet und nur seine Zeit dran verschwendet...)

Ich möchte auch nur das im Kind-Div die Transparenz wieder aufgehoben wird.

html

           <div id = father>
                  <div id=son>
                      Text
                  </div>
           </div>

css

#father {
filter:alpha(opacity=50); /* IE's opacity*/
    opacity: 0.50;
    z-index: 99;
}

son {
   ?
}

@FunkyMonkey: Hast du dein Problem gelöst bekommen, wenn ja wie hast dus gemacht?

Bye

 

[Maik]

Hi,

die Frage wurde beantwortet, aber einen Tipp hab ich noch für die Runde:

Das DIV #son darf kein Kind- / Nachfahrenelement des DIVs #father sein, sondern sein Nachbarelement, damit es den Opacity-Filter nicht erbt.

Wenn die Höhe von #father bekannt wäre, liesse sich das DIV #son mit dem entsprechend negativen margin-top-Wert über das vorangegangene Element legen, und der Text wird ohne Transparenz angezeigt.

<div id="father"></div>
<div id="son">Text</div>

div#father {
filter:alpha(opacity=50); /* IE's opacity*/
opacity: 0.5;
-moz-opacity:0.5;
width:100%;
height:200px;
background:#fff;
}

#son {
position:relative;
z-index:100;
margin-top:-200px;
}

 

[zeugwart]

Hi,

danke für die Anregungen...
Das mit den Divs in Divs, wobei man dann 2 braucht und die auf der gelichen Ebene sein müssen - ja das is nicht das Gelbe vom Ei.

Ein halbtransparentes Bild bekomm ich irgendwie nicht gebacken...
Nur transparenter Hintergrund und in der Mitte dann doch Farbe...

Ich denk momentan noch über eine andere Möglichkeit nach,
man kann ja einfach ein Farbiges Gif nehmen und dem dann Transparenz zuweisen.
Leider hat man so noch keinen Text auf dem Gif...
Deshalb wollt ich fragen, ob man in CSS eine Formatierung zuerst auf ein Bild anwenden kann und dieses dann als Hintergrundbild für beispielsweise eine Div-Box verwenden kann


Bye

 

[Maik]

Mit allen "größeren" Grafikprogrammen (Photoshop, GIMP, u.ä.) lassen sich wunderbar transparente oder halbtransparente PNGs erzeugen (ohne eine Farbe in der Mitte), die als Hintergrund für eine Box fungieren, und ihr die gewünschte Transparenz verleihen.

 

[zeugwart]

Hm,

Gif geht also nicht...
Mit PNG hats jedenfalls funktioniert, danke...

MfG,
zeugwart