css: wie mache ich bestimmte Inhalte nicht transparent auf einer Transparenten Seite?

[freaky]

Hallo Boardies,

diese Frage beschäftigt mich jetzt schon ein paar Tage. Ich hab ne Seite gebastelt in der manche Inhaltselemente transparent sind und ich möchte bestimmte Elemente von der Transparenz ausschließen.

Ein Beispiel:
ich habe im CSS unter .ce_text und .teaser folgenden code:

filter:Alpha(opacity=80);
-moz-opacity:0.8;
-khtml-opacity:0.8;
opacity:1.8;

Das lässt den Hintergrund schön transparent wirken, doch leider auch alle Elemente die sich in dem feld befinden. Gibt es eine Möglichkeit, z.B. die ganzen Bilder oder die Formularfelder die in dem Element erscheinen nicht transparent zu machen? Oder muß ich ein Workaround machen mit einem zweiten Hintergrundbild?

Vielen Dank vorab

[flom01]

Du machst einfach rundum die Elemente (also ce_text) ein weiteres <div>, bei dem du die Werte von opacity und filter wieder auf 100% bzw. 1 stellst.

lg

[freaky]

ich habs versucht indem ich ein "img" im CSS angelegt hab indem ich die Transparenzen ausgeschalten hab. Allerdings scheint der mir das zu ignorieren bzw. richtet der sich nach dem übergeordnetem Element. Mir ist aufgefallen das ich die Transparenz intensiver machen kann, aber eben nicht weniger intensiv.

Ich hab z.B. die Transparenz auch im .mod_article und darin befindet sich wiederum ein text_block indem ein image_container steckt der dann auch transparent ist.

[flom01]

du kannst .mod_article transparenz machen... in diesem div.mod_article machst du einen weitern div.opacitydiv.

im CSS setzt du dann

.mod_article .opacitydiv {
filter:Alpha(opacity=1);
...
}

Du könntest auch den Link zu deiner Webseite angeben, dann könnten wir dir schneller helfen.

[codestorm]

Benutze für alle modernen Browser (ausser IE 8 abwärts) besser:

background-color: rgba(255,255,255,0.8); //der letzte Wert gibt die Transparenz an

Der opacity-Wert wird an die Kind-Elemente weitervererbt.

Beim IE8 etc... würde ich ein halbtransparentes png als Hintergrundbild nutzen.

[freaky]

Danke das haut super hin :-)

Merke: opacy wird weitervererbt....

[newbiene]

wenn ich rein opacity: 0.5; in die Codezeile eingebe, bekomme ich das für den gesamten Inhalt des Mains. Ich möchte aber nur das Hintergrundbild mit einer Transparenz belegen.
Bisher hab ich die richtige Zeichenfolge aber noch nicht raus. Kann mir bitte jemand auf die Sprünge helfen?
Vielen Dank
newbiene

[rezico]

Ich mach immer insgesamt 3 divs.
Einen hauptcontainer, einmal das div mit der transparenz und eins mit dem inhalt. Beim transparentem leg ich die höhe fest und das transparente positionier ich absolute und setz es mit top:x px und left:x px in das transparente. Dazu beim inhaltsdiv den z-index nich vergessen!

Funktioniert bei mir hier mit jedem browser problemlos!

[newbiene]

hmm, ich hatte gehofft, ich könnte einzig das Hintergrundbild im Codebereich mit einer opacity versehen, jedoch treffe ich scheinbar die "Formulierung" dafür nicht.
Wenn ich die opacity dort angebe, ohne mich auf das Hintergrundbild zu beziehen, schimmert das Hintergrundbild des body durch. Das ist nicht gewollt.

LG
newbiene

[folkfreund]

Hallo newbiene,

ich bin jetzt etwas verwirrt: Wenn du nur das Hintergrundbild transparent haben willst, dann nimm doch einfach ein (halb-)transparentes PNG als Hintergrundbild. Aber dann ist es ganz normal, dass das durchscheint was dahinter liegt (z.B. dein Body mit Hintergrund). Das ist es doch was Transparenz bedeutet
Oder willst du das Hintergrundbild nur aufhellen oder abdunkeln?

Und was ist bei dir der 'Codebereich'? Hast du einen Link zu deiner Seite?

Gruß, folkfreund

[newbiene]

sorry, ist vielleicht etwas wirr dargestellt.
Der Body hat ein eigenes Hintergrundbild. Der Main hat eine Hintergrundfarbe und ein Hintergrundbild, ( das hat aber nicht die volle Höhe des Bildes). Klar ginge das auch mit nem transparenten png, aber es ist einfacher die Transparenz über css abzustimmen, als jedesmal Bilder rauf und runter.
(jedenfalls, wenn man´s könnte *räusper*)
Mit Codebereich meine ich den Kasten unten in einer Formatdefinition, über der seht "eigener Code".

Link gibt´s leider noch nicht, da das ganze noch lokal gebastelt wird.
LG
Newbiene

[folkfreund]

Schade, dass die Seite nicht online anzusehen ist - dann könnte man besser suchen.
Ein paar Anmerkungen:

Weiter oben in diesem Thread kannst du nachlesen, dass Transparenz vererbt wird. Das Standard-Template fe_page.tpl fügt in das div id=main ein div class=inside ein. Du könntest folgendes versuchen:

#main {
  background:transparent url="main_background.png" left top no-repeat;
  filter:Alpha(opacity=50);
  -moz-opacity:0.5;
  -khtml-opacity:0.5;
  opacity:0.5;
}
#main .inside {
  filter:Alpha(opacity=100);
  -moz-opacity:1.0;
  -khtml-opacity:1.0;
  opacity:1.0;
}

Das hab ich aber nicht ausprobiert. Der Grundgedanke ist, über dem div mit dem Hintergrundbild ein div ausdrücklich wieder opacity auf 1 zu setzen, damit das weitervererbt wird.

Es bleibt aber dabei, dass dann der body-Hintergrund durch das halbtransparente Bild durchscheint. Aber warum sollte es sonst auch transparent sein?

Gruß, folkfreund

[newbiene]

liest sich schon mal gut; der Gedanke dahinter ist allerdings, dass nur ein teil des main das transparente hintergrundbild haben soll, aber dahinter und im Rest des Main eine Hintergrundfarbe sein soll, damit nicht der Bodyhintergrund sich mit dem Mainhintergrundbild mischt.
Die Mainhintergrundfarbe soll als nicht transparent sein; quasi ne Isolierschicht zwischen Mainbild und Bodybild.
Im Prinzip müsste also nur das Hintergrundbild des Main mit der opacity angesprochen werden, jedoch weiß ich nicht, wie.
*seufz* ich muss noch soviel lernen.
Danke für die Hilfestellungen.

LG
Newbiene

[folkfreund]

Vielleicht hab ich dich ja jetzt endlich verstanden: du möchtest das Bild nicht wirklich transparent haben, sondern nur eine farbliche Anpassung an eine Farbe, die du über eine Hintergrundfläche definierst?
Das würde ich lieber mit einem Grafikprogramm und Layers lösen. Da kannst du das auch in Ruhe ausprobieren.

folkfreund