Seite 1 von 1

transparenter Tabellenhintergrund im Firefox?

Verfasst: 25.01.2006 23:15
von Gumfuzi
Hallo!

folgende Aufgabe:
ich habe eine Seite (lokal) die ein Hintergrundbild hat. Davor sind Tabellen. Bei diesen Tabellen kann man ja einen Hintergrund einbauen (Farbe, Bild, etc.), jedoch nicht transparent. Es soll dann so sein, daß (zwecks besserer Lesbarkeit der Tabellen) die Tabelle auf einem halbtransparentem, gräulich-weissem Bild liegt, sodaß an der Stelle, wo die tabelle ist, das Hintergrundbild abgeschwächt ist, aber dennoch leicht sichtbar.

Das soetwas nicht im Standard vorgesehen ist, habe ich via Frontpage (jaja, ich weiß...) eine halbtransparente, freischwebende Autoform (Rechteck, ca. 80% transparent) darüber gelegt.
Ergebnis: funzt (aber nur im Internet Explorer, da es IMO ein Office-Feature ist).
Im Firefox funzt das nicht, da fehlen die Autoformen auf der Seite einfach...

Die Frage:
wie bringe ich dem Firefox bei, daß er die Auoformen darstellt?
Gibt es eine andere Lösung dafür?

*edit*
ich habe es nun gefunden, falls jemand eine Lösung sucht, dann hierher geguckt:
http://standards.webmasterpro.de/index- ... Tipps.html
Ein Beispielcode:

Code: Alles auswählen

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#box{
    width:300px;
    height:300px;
    padding:20px;
}
#transparent{
    position:relative;
    opacity: 0.5;
    -moz-opacity:0.5;
    -khtml-opacity:0.5;
    filter:alpha(opacity=50);
    background:white;
}
#transparent *{
    color:black;
}
</style>
</head>
<body link="#008080" vlink="#008080" alink="#008080" background="hintergrund.jpg">
<div id="box">
    <div id="transparent">
          <p>ganz viel Text ganz viel Text ganz viel Text ganz viel Text ganz viel Text ganz viel Text ganz viel Text ganz viel Text ganz viel Text ganz viel Text ganz viel Text ganz viel Text ganz viel Text ganz viel Text ganz viel Text ganz viel Text </p>
    </div>
</div>
</body>
</html>
*nochmal edit*
habe nun folgenden Code:

Code: Alles auswählen

...
<style type="text/css">
#box{
    width:500px;
    height:500px;
    padding:50px;
}
#transparent{
    position:relative;
    opacity: 0.2;
    -moz-opacity:0.2;
    -khtml-opacity:0.2;
    filter:alpha(opacity=20);
    background:white;
}
#transparent *{
    color:red;
}
</style>
</head>

<body link="#008080" vlink="#008080" alink="#008080" background="campfires2k2.jpg">

<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="90%" id="transparent">
  <tr>
    <td width="33%"><font color="#FF0000" face="Comic Sans MS"><b>&nbsp; News</b></font></td>
    <td width="33%"><font color="#FF0000" face="Comic Sans MS"><b>&nbsp; Nachschlagen</b></font></td>
    <td width="34%"><font color="#FF0000" face="Comic Sans MS"><b>&nbsp; Suche & Service</b></font></td>
  </tr>
...
nun ist die Schrift in der Tabelle auch transparent - wie kann ich die Schrift normal machen?

Verfasst: 26.01.2006 00:12
von Pyramide
PNG unterstützt einen Alphakanal, demnach reicht ein einfaches

Code: Alles auswählen

body {background: url(windows95.jpg);}
table {background: url(halbtrans.png);}
http://pyra.cat-proof.de/temp/halbtransparent.html

Allerdings: Obwohl das PNG Format schon über 10 Jahre alt ist, unterstützt der IE die Transparenz anno domini 2006 immer noch nicht :roll:. Da müsstest du dann evtl. noch mit filter:Alpha nachhelfen.

Verfasst: 26.01.2006 01:56
von easygo
Pyramide hat geschrieben:Allerdings: Obwohl das PNG Format schon über 10 Jahre alt ist, unterstützt der IE die Transparenz anno domini 2006 immer noch nicht :roll:.
Ist so nicht ganz richtig! Der IE6 unterstützt sehr wohl transparente
Grafiken im PNG Format. Thema hatten wir schon mal hier -->

http://www.phpbb.de/viewtopic.php?t=108682

... und wer weiß, was Alpha-Transparenz ist, der sollte auch von der guten,
alten Colour-Key-Transparenz schon mal was gehört haben. easy

Verfasst: 26.01.2006 02:22
von Pyramide
easygo hat geschrieben:... und wer weiß, was Alpha-Transparenz ist, der sollte auch von der guten,
alten Colour-Key-Transparenz schon mal was gehört haben. easy
Naja aber die hilft in diesem Fall nicht weiter.

Verfasst: 26.01.2006 20:34
von Gumfuzi
@Pyramide: vielen Dank!!!!!!!!!! funzt perfekt!

Verfasst: 26.01.2006 22:41
von Jan88
Pyramide hat geschrieben:PNG unterstützt einen Alphakanal, demnach reicht ein einfaches

Code: Alles auswählen

body {background: url(windows95.jpg);}
table {background: url(halbtrans.png);}
http://pyra.cat-proof.de/temp/halbtransparent.html

Allerdings: Obwohl das PNG Format schon über 10 Jahre alt ist, unterstützt der IE die Transparenz anno domini 2006 immer noch nicht :roll:. Da müsstest du dann evtl. noch mit filter:Alpha nachhelfen.
Hast du vlt auch ganz kurz ne Erklärung dazu? Muss ich eine halbtrans.png selber erstellen?

Verfasst: 26.01.2006 23:05
von Pyramide
Die halbtrans.png ist im prinzip nur ein 1x1 Pixel Bild welches du entsprechend mehr oder weniger Transparent gestaltest. Kannst natürlich auch meins nehmen, wenn dir das ausreicht.

Verfasst: 27.01.2006 13:51
von Jan88
Ja als anfang wäre ich echt dankbar

Kannst du sie mir geben?

Verfasst: 27.01.2006 16:40
von Pyramide

Verfasst: 27.01.2006 17:09
von Jan88
Danke,

werds gleich mal ausprobieren.