Hintergrund durchscheinend (opacity), Vordergrund bitte nicht

[Linuchs]

Hallo,

wenn ich den Hintergrund einer Tabelle durchscheinend mache, ist auch die Schrift durchscheinend.

Also setze ich einen durchscheinenden div um die Tabelle. Da sich opacity vererbt, muss ich die Tabelle selbst mit opacity:1 defineren.

Das klappt aber nicht, die Schrift ist weiterhin durchscheinend (Firefox, Opera):

div.background {  
  background: #fff;  
  opacity: 0.2;  
}  
table.liste {  
  width: 100%;  
  opacity: 1;  
}  

<div class=background><table class=liste width=100%>  
<thead><tr>  
  <td>Staat</td>  
  <td>Ort</td>  
  <td>Name</td>  
  <td>Zeit</td>  
  <td>HP</td>  
</tr></thead>  
...  
</table></div>

[T-Rex]

Wenn du nur den background transparent haben willst gibt es rgba.
Wenn du aber den hintergrund ausgrauen möchtest, so dass man eine fliegende Box schön sieht und nicht den hintergrund, brauchst du zwei voneinander getrennte elemente. Das eine element ist der Hintergrund und das andere ist die fliegende Box die drüber liegt.

Gruß
fliegender
T-Rex

[misterunknown]

Moin,

transparenten Hintergrund kann man mit rgba() realisieren. Diese Funktionalität wird mittlerweile breit unterstützt.

Grüße Marco

[Der Martin]

Hi,

wenn ich den Hintergrund einer Tabelle durchscheinend mache, ist auch die Schrift durchscheinend.

nein, sondern dann, wenn du die Tabelle selbst durchscheinend machst. Das wirkt dann auf den _gesamten_ Elementinhalt einschließlich der Nachfahren.

Also setze ich einen durchscheinenden div um die Tabelle. Da sich opacity vererbt, muss ich die Tabelle selbst mit opacity:1 defineren.

Nein, denn die opacity-Werte multiplizieren sich von Kind zu Kind.

Was du vermutlich willst, ist eine teiltransparente Hintergrundfarbe, etwa so:

background-color: rgba(255,255,255,0.2);

So long,
 Martin

[Linuchs]

Hallo Martin,

Was du vermutlich willst, ist eine teiltransparente Hintergrundfarbe, etwa so:

background-color: rgba(255,255,255,0.2);

danke dir, das isses.

Linuchs

[MudGuard]

Hi,

Was du vermutlich willst, ist eine teiltransparente Hintergrundfarbe, etwa so:

oder ein teiltransparentes Hintergrundbild -> png entsprechend im Graphikprogramm erstellen.
background-opacity ider background-image-opacity gibt's m.W. nicht ...

cu,
Andreas

[Linuchs]

Halo Andreas,

oder ein teiltransparentes Hintergrundbild -> png entsprechend im Graphikprogramm erstellen.
background-opacity ider background-image-opacity gibt's m.W. nicht ...

Das war bisher meine Lösung, aber man muss ja mit der Zeit gehen. Sonst geht man mit der Zeit ;-)

Ich glaube, ich habe noch mächtig "Altlasten" in meinen Webseiten, weil es damals einfach nicht anders ging. Und ja, manchmal nutze ich auch Tabellen zum Layout. Denn zwei Spalten gleich-hoch zu bekommen ist einfach Krampf mit CSS.

Linuchs

[Linuchs]

bei opacity muss ich immer an Moorhausen (jetzt Lilienthal bei Bremen) denken. Das war die City meines Opas und meiner Vorfahren.

Linuchs