CSS: Problem mit Transparenz + Hintergrundfarbe..

semteX

begehrt die rostschaufel

Registered: Oct 2002
Location: Pre
Posts: 14594

16.07.2006 - 23:46

Mein ziel war folgendes:

Boxen mit rand, die eine füllfarbe besitzen aber zu 70% durchsichtig sind WEIL im hintergrund eine Watermark ist...

Spooky hat mir ne lösung gebastelt, die funktioniert im FF super, im IE ist das feld wieder irgendwie ned sichtbar :/

praktisch anzusehen HIER:

http://www.team-steiner.at/CSSproblem.php

Wie kann ich das umgehen / lösen?

Vielen dank und gute nacht,
semteX

mat

Administrator
Legends never die

Registered: Aug 2003
Location: nö
Posts: 25423

17.07.2006 - 01:47

opacity wird vom ie (und von einiges anderen browsern) nicht unterstützt.

du musst es mit einem bgimage machen. entweder per png (mit js-fix für ie) oder per gif mit einigen transparenten pixel innerhalb des bildes.

1tere methode ist natürlich schöner.

tomstig

OC Addicted

Registered: Nov 2003
Location: /home/tomstig/
Posts: 1341

17.07.2006 - 05:40

Code:

div#menue{
	float: left;
	width: 200px; 
	filter:Alpha(opacity=70);	 
	-moz-opacity:0.7; 
	opacity:0.7; 
	background-color: #fff;
	color: #000;
	border: 1px solid #CCCCCA;
	border-left: none;
}

Ein Beispiel. Funktioniert in IE, FF, Opera.
Edit: Ich seh grad, dass dein CSS ähnlich dem meinigen ist. Probiert einfach mal background-color statt background.

Bearbeitet von tomstig am 17.07.2006, 05:46

Spikx

My Little Pwny

Registered: Jan 2002
Location: Scotland
Posts: 13504

17.07.2006 - 10:51

@tomstig & mat: Das Problem ist, dass #box durch die Anweisung

Code:

top:0px;
left:0px;
right:0px;
bottom:0px;

nicht auf die Größe von #container aufgezogen wird im IE (also dort nur 0 mal 0 px groß ist).
Hat absolut gar nichts mit background-color oder der opacity Anweisung zu tun, den dafür steht ja auch

Code:

filter:Alpha(opacity=70);

da. Filter sind ja IE spezifisch und funktionieren dort natürlich auch. Kann man überprüfen, indem man #box eine fixe Größe zuweist.

mat

Administrator
Legends never die

Registered: Aug 2003
Location: nö
Posts: 25423

17.07.2006 - 10:54

wieso funkts dann im FF?

btw: schön, dass opacity jetzt auch vom ie unterstützt wird, auch wenns wieder mal ein wenig "eigen" implementiert wurde

Spikx

My Little Pwny

Registered: Jan 2002
Location: Scotland
Posts: 13504

17.07.2006 - 10:57

Weil FF CSS besser versteht als der IE

Um divs im IE auf diese Weise auf die Größe des Elternelements aufzuziehen bentötigt man normalerweise den/einen IEfix. Hat in dem Fall aber auch nicht funktioniert, aber vielleicht lag's an etwas anderem.
I werd heut nochmal a einfaches Beispiel ausprobieren um des zu überprüfen.

//Filter existieren schon seit IE 4.0 btw.

Bearbeitet von Spikx am 17.07.2006, 11:00

semteX

begehrt die rostschaufel

Registered: Oct 2002
Location: Pre
Posts: 14594

17.07.2006 - 13:06

das problem, das diesen workaround nötig machte war folgendes:

Ich wollte ne box mit folgenden eigenschaften:
Rahmen + Schrift = 100% deckkraft
Füllfarbe = 30% deckkraft.

eines der probleme war eben die "vererbung"...

wenn ich also ne <div id='meinebox'> mit 30% deckkraft aufgezogen hatte und dann ne <div id='100prozText'> machte, hatte der text dennoch nur 30% deckkraft

APDATE!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!EINSELF

http://team-steiner.at/CSSproblem.php

i hab jetzt den gatsch als png realisiert, jetzt fehlt nur noch da javascript ie haudichüberdieheuser fix... hat den zufällig wer? sonst werd ich mal google startn...

thx

NEXT UPDATE!

Gibts irgend nen IE PNG fix, mit dem ich den verdammten hintergrund auch repeaten kann?!

mat, wie funkt die GIF spielerei?
danke

Bearbeitet von semteX am 17.07.2006, 22:06

semteX begehrt die rostschaufel Registered: Oct 2002 Location: Pre Posts: 14594	16.07.2006 - 23:46 Mein ziel war folgendes: Boxen mit rand, die eine füllfarbe besitzen aber zu 70% durchsichtig sind WEIL im hintergrund eine Watermark ist... Spooky hat mir ne lösung gebastelt, die funktioniert im FF super, im IE ist das feld wieder irgendwie ned sichtbar :/ praktisch anzusehen HIER: http://www.team-steiner.at/CSSproblem.php Wie kann ich das umgehen / lösen? Vielen dank und gute nacht, semteX
mat Administrator Legends never die Registered: Aug 2003 Location: nö Posts: 25423	17.07.2006 - 01:47 opacity wird vom ie (und von einiges anderen browsern) nicht unterstützt. du musst es mit einem bgimage machen. entweder per png (mit js-fix für ie) oder per gif mit einigen transparenten pixel innerhalb des bildes. 1tere methode ist natürlich schöner.
tomstig OC Addicted Registered: Nov 2003 Location: /home/tomstig/ Posts: 1341	17.07.2006 - 05:40 Code: `div#menue{ float: left; width: 200px; filter:Alpha(opacity=70); -moz-opacity:0.7; opacity:0.7; background-color: #fff; color: #000; border: 1px solid #CCCCCA; border-left: none; }` Ein Beispiel. Funktioniert in IE, FF, Opera. Edit: Ich seh grad, dass dein CSS ähnlich dem meinigen ist. Probiert einfach mal background-color statt background. Bearbeitet von tomstig am 17.07.2006, 05:46
Spikx My Little Pwny Registered: Jan 2002 Location: Scotland Posts: 13504	17.07.2006 - 10:51 @tomstig & mat: Das Problem ist, dass #box durch die Anweisung Code: `top:0px; left:0px; right:0px; bottom:0px;` nicht auf die Größe von #container aufgezogen wird im IE (also dort nur 0 mal 0 px groß ist). Hat absolut gar nichts mit background-color oder der opacity Anweisung zu tun, den dafür steht ja auch Code: `filter:Alpha(opacity=70);` da. Filter sind ja IE spezifisch und funktionieren dort natürlich auch. Kann man überprüfen, indem man #box eine fixe Größe zuweist.
mat Administrator Legends never die Registered: Aug 2003 Location: nö Posts: 25423	17.07.2006 - 10:54 wieso funkts dann im FF? btw: schön, dass opacity jetzt auch vom ie unterstützt wird, auch wenns wieder mal ein wenig "eigen" implementiert wurde
Spikx My Little Pwny Registered: Jan 2002 Location: Scotland Posts: 13504	17.07.2006 - 10:57 Weil FF CSS besser versteht als der IE Um divs im IE auf diese Weise auf die Größe des Elternelements aufzuziehen bentötigt man normalerweise den/einen IEfix. Hat in dem Fall aber auch nicht funktioniert, aber vielleicht lag's an etwas anderem. I werd heut nochmal a einfaches Beispiel ausprobieren um des zu überprüfen. //Filter existieren schon seit IE 4.0 btw. Bearbeitet von Spikx am 17.07.2006, 11:00
semteX begehrt die rostschaufel Registered: Oct 2002 Location: Pre Posts: 14594	17.07.2006 - 13:06 das problem, das diesen workaround nötig machte war folgendes: Ich wollte ne box mit folgenden eigenschaften: Rahmen + Schrift = 100% deckkraft Füllfarbe = 30% deckkraft. eines der probleme war eben die "vererbung"... wenn ich also ne <div id='meinebox'> mit 30% deckkraft aufgezogen hatte und dann ne <div id='100prozText'> machte, hatte der text dennoch nur 30% deckkraft APDATE!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!EINSELF http://team-steiner.at/CSSproblem.php i hab jetzt den gatsch als png realisiert, jetzt fehlt nur noch da javascript ie haudichüberdieheuser fix... hat den zufällig wer? sonst werd ich mal google startn... thx NEXT UPDATE! Gibts irgend nen IE PNG fix, mit dem ich den verdammten hintergrund auch repeaten kann?! mat, wie funkt die GIF spielerei? danke Bearbeitet von semteX am 17.07.2006, 22:06

CSS: Problem mit Transparenz + Hintergrundfarbe..

Forum Index > Software > Coding Stuff

semteX

mat

tomstig

Spikx

mat

Spikx

semteX