Zitat von wenco:
ich möchte folgenden Filter benutzen:
style="filter:alpha(opacity=50); -moz-opacity:0.5; opacity:0.5;"
um die Farbe einer tabellespalte durchscheinend zu machen
@versuch13
Dein Lösungsansatz mit zwei übereinander liegenden DIVs (= Blockelementen) lässt sich in einer Tabellen-Konstruktion aber nicht so einfach realisieren.
Eine absolute Positionierung in Verbindung mit den Angaben
left:0px; und
top:0px; kann nicht verwendet werden, da die DIVs ansonsten im BODY positioniert werden und somit über der Tabelle liegen, sie also überdecken. Eine Positionierung ohne
left und
top bewirkt, dass die DIVs unterhalb / am Ende der Tabelle angezeigt werden.
Mit der CSS-Eigenschaft
position:relative werden die beiden DIVs zwar in der Tabellenzelle angezeigt, dafür aber untereinander verschoben, was für Blockelemente typisch ist.
Dieser automatische Zeilenumbruch lässt sich mit der Angabe
margin-top= negative DIV-Höhe für das zweite DIV korrigieren
Hier der Source zum Table - Workaround:
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title></title>
<style type="text/css">
<!--
body {
background: url(deine_grafik.jpg); /* Hintergrundbild um opacity-Effekt zu erkennen */
color: #ddeeff;
}
div.opacity {
position: relative;
z-index: 1;
filter: alpha(opacity=50);
-moz-opacity: 0.5;
width: 400px;
height: 220px;
background-color: #003080;
}
div.no_opacity {
position: relative;
z-index: 2;
width: 400px;
height: 220px;
margin-top: -220px;
}
-->
</style>
</head>
<body>
<table border="1" cellspacing="5" cellpadding="5" width="100%">
<tr>
<td>
Test Test Test
</td>
</tr>
<tr>
<td>
<div class="opacity"></div>
<div class="no_opacity">
<p>Test Test Test</p>
<p>Test Test Test</p>
</div>
</td>
</tr>
<tr>
<td>
Test Test Test
</td>
</tr>
</table>
</body>
</html>
Anmerkung: Ob und wie diese CSS-Technik in komplexen / verschachtelten Tabellen funktioniert, kann ich an dieser Stelle nicht beurteilen.
Hier der Basic-Source für die tabellenlose Variante:
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title></title>
<style type="text/css">
<!--
body {
background-color: #000010;
color: #ddeeff;
}
p {
font-size: 20px;
font-weight: bold;
}
div.opacity {
position: absolute;
left: 50px;
top: 50px;
z-index: 1;
filter: alpha(opacity=50);
-moz-opacity: 0.5;
width: 400px;
height: 220px;
background-color: #003080;
}
div.no_opacity {
position: absolute;
left: 50px;
top: 50px;
z-index: 2;
width: 400px;
height: 220px;
}
div.no_opacity p {
color: #ffff00;
font-size: 40px;
font-weight: bold;
padding: 5px;
}
-->
</style>
</head>
<body>
<p>Test Test Test</p>
<p>Test Test Test</p>
<p>Test Test Test</p>
<p>Test Test Test</p>
<p>Test Test Test</p>
<p>Test Test Test</p>
<p>Test Test Test</p>
<p>Test Test Test</p>
<p>Test Test Test</p>
<div class="opacity"></div>
<div class="no_opacity">
<p>Test Test Test</p>
<p>Test Test Test</p>
</div>
</body>
</html>
