CSS Transparenz Problem

befubo · 04.02.2010, 11:12

Hallo zusammen

Hab da wieder mal n Problem, Google hat mir nur bedingt weitergeholfen:

Ich definiere per externem css eine halb-transparente Box. Das funktioniert wunderbar, also:

Code:

div#Info {

    font-size: 0.9em;

    float: right; width: 12em;

    margin: 0; padding: 0;

    border: 1px solid white; background-color: #000000;

-moz-opacity: 0.5;

-khtml-opacity: 0.5;

filter:alpha(opacity=50);

Das Problem ist, dass der Text innerhalb der Box dann auch transparent wird. Mein Normaler Code:

Code:

<div id="Info">

blablalb

blablablablabl

  </div>

Jetzt habe ich versucht, mit einer 2. Definition den Text wieder rückgängig zu färben.

Externe CSS:

Code:

div#Info h1 {

    font-size: 1em;

    margin: 0.5em;

-moz-opacity: 1;

-khtml-opacity: 1;

filter:alpha(opacity=100);

  }

Normaler Code:

Code:

<div id="Info">

<h1>blablalb

blablablablabl</h1>

  </div>

Funzt aber nicht. Kann mir da jemand helfen?

thx und mfg

befubo

//EDIT

Ich hab gerade nochmals die Forenregeln studiert und habe den Bereich "multipostings" wiederentdeckt.

Deshalb kurz: Ich habe hier zuerst gepostet, weil ihr mein "Stammforum" seit. Immer sehr kompetente Auskünfte und Hilfsbereitschaft. Aber ich fragte mich, es heisst ja php.de und darum hab ich den Post bei html.de ebenfalls aufgegeben.

(http://www.html.de/html-und-xhtml/30...z-problem.html)

Capfly · 04.02.2010, 12:41

Gut dass du sie dir durchgelesen hast.
Allerdings sehe ich einen Unterschied in der Uhrzeit

Wäre draus zu schließen, dass du bei html.de zuerst gepostet hast.
Aber nun gebe ich an die CSS-Experten weiter

nikosch · 04.02.2010, 12:48

Dann wollen wir mal Gnade walten lassen.

Schön, dass Du Bescheid gesagt hast.

Ich behaupte mal: Geht nicht. opacity ist opacity.
Du kannst aber sicher eine andere Box absolut darüber positionieren (hängt natürlich vom Seitenaufbau ab).

PS

Googlezeit: 1 Sekunde

http://tobias-otte.de/essays/css-transparenz/

befubo · 04.02.2010, 14:04

hi ^^

Sorry, Ich hab gepostet, dann hab bei euch gelesen und war n bissl verwirrt und hab halt verkehrt herum gschrieben und hab nicht auf die Uhrzeit verlassen. Kommt nicht mehr vor.

@nikosch
Hmm, iwe meinst du das? Eine <div> box in einer <div> box drin verschachtelt?
Nun, Googeln tu ich eig immer sehr intensiv und diese Seite bschreibt ja eig. einfach mein Problem; dass ALLES Transparent wird. Aber kein Lösungsansatz...

thx

nikosch · 04.02.2010, 17:25

Zitat:

Du kannst aber sicher eine andere Box absolut darüber positionieren

Was ist daran falsch zu verstehen? Wenn Du schon mal CSS-Layouts gemacht hast, solltest DU wissen, was das bedeutet.

befubo · 04.02.2010, 22:54

Du musst mir verzeihen, CSS ist das Thema, welches ich gerade am lernen bin. PHP ist jetzt im Grundwissen da und HTML und CSS sind jetzt dran.
Aber ich muss nicht mehr wissen, ich habe genug Eigeninitiative, ums selber rauszufinden. Meistens brauch ich einfach einen kleinen Stoss in die richtige Richtung.
Ich lasse den Threat mal noch auf, ich werde meine Ergebnisse dann mal posten und ihr könnt dann wieder voll zuschlagen

Ich danke vorerst und gute Nacht
befubo

Frank · 04.02.2010, 23:02

Informier dich einfach mal über
position und z-index

feeela · 10.02.2010, 17:39

Ich habe ähnliches Problem selbst einmal gehabt, aber die Transparenz wird vererbt. Wenn du nun in einer Box 80% Deckung hast (20% Transparenz) und einem Kindelement wiederrum 80% Deckung zuweist, berechnet der Browser als Deckkraft 80% von 80%, soll heißen die Kindelemente werden immer Transparenter.
Die einzige Lösung besteht tatsächlich - wie oben erwähnt - in unabhängigen Tags, die eben nicht in einander verschachtelt sind. Siehe z.B. die diversen Lightbox-Varianten, dort wird ein separates DIV erzeugt um den Bildschirmfüllenden Abblendlayer darzustellen.

P.S. derzeit sollte die Angabe zur Transparenz wie bei quirksmode beschrieben nahezu alle aktuellen Browser abdecken...

ph|L · 24.02.2010, 12:10

Setzte das <div> wo dein Text ist einfach mit

Code:

div.textbox { position: absolute; top: XXpx; left: XXpx; }

Natürlich noch die koordinaten anpassen.

ChrisB · 28.03.2010, 22:38

Zitat:

Zitat von feeela

Ich habe ähnliches Problem selbst einmal gehabt, aber die Transparenz wird vererbt.

Nein, wird sie nicht.
http://www.w3.org/TR/2008/WD-css3-co.../#transparency

Zitat:

Wenn du nun in einer Box 80% Deckung hast (20% Transparenz) und einem Kindelement wiederrum 80% Deckung zuweist,

dann ist das absolut keine Vererbung im Sinne von CSS.

Zitat:

berechnet der Browser als Deckkraft 80% von 80%, soll heißen die Kindelemente werden immer Transparenter.

Ja natürlich.
Das ist simple Mathematik, aber keine Vererbung.

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
Problem mit Basedir in PhP	cmuch05	Datenbanken	9	08.01.2009 14:17
[Erledigt] Problem: PHP Selbe Datei mehr als 1 Mal	soulan	PHP Tipps 2008	13	28.11.2008 22:51
Problem Upload mehrere Dateien und schreiben in DB	Lapje	PHP Tipps 2008	1	22.10.2008 13:12
utf8 Problem (Daten aus DB auslesen)	go1denboy	PHP Tipps 2008	1	23.09.2008 12:19
Problem mit swfobjects	R4v3r	JavaScript, Ajax und mehr	8	21.09.2008 14:17
[Erledigt] Galerie Problem...	coraplanet	PHP Tipps 2008	4	06.06.2008 13:42
Problem mit Transparenz bei PNGs	max-dhom	HTML, Usability und Barrierefreiheit	5	21.10.2006 13:15
datensätze defekt oder problem mit dem einlesen?	Ministry	Datenbanken	4	06.07.2006 18:42
problem!!!		PHP Tipps 2006	6	08.02.2006 11:06
[Erledigt] wieder ein Problem bei phpmailer und smtp		PHP Tipps 2006	24	07.02.2006 01:07
Problem - GD, Rund, Transparent, keine Kanten		PHP-Fortgeschrittene	5	10.11.2005 12:09
Smarty und PHP-Skript Problem		PHP Tipps 2004-2	2	03.12.2004 22:27
GIF als PNG ausgeben: Transparenz verlohren.		PHP-Fortgeschrittene	7	21.11.2004 16:19
Problem mit transparenz von PNG Grafiken		HTML, Usability und Barrierefreiheit	6	21.11.2004 13:34
Problem mit alter JavaScript-Funktion	woods	PHP Tipps 2004	1	13.08.2004 13:34


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

04.02.2010, 12:41
Capfly Erfahrener Benutzer Registriert seit: 25.01.2009 Beiträge: 976 PHP-Kenntnisse: Fortgeschritten	Gut dass du sie dir durchgelesen hast. Allerdings sehe ich einen Unterschied in der Uhrzeit Wäre draus zu schließen, dass du bei html.de zuerst gepostet hast. Aber nun gebe ich an die CSS-Experten weiter __________________ MfG ~Capfly Jetzt NEU! Cpix & Wbits Katahlan.de - Das Browsergame

04.02.2010, 12:48
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 34.248 PHP-Kenntnisse: Fortgeschritten	Dann wollen wir mal Gnade walten lassen. Schön, dass Du Bescheid gesagt hast. Ich behaupte mal: Geht nicht. opacity ist opacity. Du kannst aber sicher eine andere Box absolut darüber positionieren (hängt natürlich vom Seitenaufbau ab). PS Googlezeit: 1 Sekunde http://tobias-otte.de/essays/css-transparenz/ __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. -- Geändert von nikosch (04.02.2010 um 12:51 Uhr).

04.02.2010, 23:02
Frank Erfahrener Benutzer Registriert seit: 07.06.2008 Beiträge: 993 PHP-Kenntnisse: Fortgeschritten	Informier dich einfach mal über position und z-index __________________

10.02.2010, 17:39
feeela Erfahrener Benutzer Registriert seit: 20.01.2010 Beiträge: 108 PHP-Kenntnisse: Fortgeschritten	Ich habe ähnliches Problem selbst einmal gehabt, aber die Transparenz wird vererbt. Wenn du nun in einer Box 80% Deckung hast (20% Transparenz) und einem Kindelement wiederrum 80% Deckung zuweist, berechnet der Browser als Deckkraft 80% von 80%, soll heißen die Kindelemente werden immer Transparenter. Die einzige Lösung besteht tatsächlich - wie oben erwähnt - in unabhängigen Tags, die eben nicht in einander verschachtelt sind. Siehe z.B. die diversen Lightbox-Varianten, dort wird ein separates DIV erzeugt um den Bildschirmfüllenden Abblendlayer darzustellen. P.S. derzeit sollte die Angabe zur Transparenz wie bei quirksmode beschrieben nahezu alle aktuellen Browser abdecken...

24.02.2010, 12:10
ph\|L Benutzer Registriert seit: 14.08.2008 Beiträge: 65	Setzte das <div> wo dein Text ist einfach mit Code: div.textbox { position: absolute; top: XXpx; left: XXpx; } Natürlich noch die koordinaten anpassen.