mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Fr 29.03.2024 11:25 Benutzername: Passwort: Auto-Login

Thema: CSS: Halb-Transparente Tabelle mit Nicht-transparentem Text vom 05.05.2009


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> CSS: Halb-Transparente Tabelle mit Nicht-transparentem Text
Autor Nachricht
TomPee
Threadersteller

Dabei seit: 19.12.2004
Ort: Hannover / Göttingen
Alter: 43
Geschlecht: Männlich
Verfasst Di 05.05.2009 18:23
Titel

CSS: Halb-Transparente Tabelle mit Nicht-transparentem Text

Antworten mit Zitat Zum Seitenanfang

Hallo zusammen.

Ich (Achtung: Printler mit Halbwissen) möchte gerne eine Tabelle in meinem HTML-Dokument halbtransparent haben, der innen befindlichen Text allerdings soll nicht transparent sein.

Die Tabelle kriege ich soweit noch hin. Das sieht bei mir so aus:

Code:
.tinytableopacity TD {
border:2px #F60;
border-style:solid;

background-color:#FC0;
filter:alpha(opacity=50);
-moz-opacity:.50;
opacity:.50;}


Somit ist der Text in der Tabelle aber auch auf 50% Deckkraft.
Wie bekomme ich den Text jetzt wieder auf volle Deckraft? Gesehen habe ich das schon mal.

Vielen Dank schonmal.


Zuletzt bearbeitet von TomPee am Di 05.05.2009 21:05, insgesamt 2-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
m
Moderator

Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Di 05.05.2009 19:14
Titel

Antworten mit Zitat Zum Seitenanfang

Das wird auf diesem Weg nicht funktionieren. Denn wenn du die Tabellenzelle per CSS mit
einer opacity Eigenschaft versiehst, dann werden logischerweise alle Inhalte welche sich innerhalb
dieser Zelle befinden auch transparent dargestellt.

Du hast vers. Möglichkeiten das gewünschte Ergebnis zu erreichen. Eine wäre dass du einfach eine
halbtransparente Hintergrundgrafik einsetzt. Eine andere Möglichkeit ist es, deinen Text absolut über
einem Element mit opacity Eigenschaft zu platzieren (also ein Element dass sich nicht innerhalb
des Elementes welches mit der opacity Eigenschaft versehen ist befindet).

Zur ersten Möglichkeit: ein halbtransparentes PNG als Hintergrundgrafik einsetzen. Um dieses PNG
auch in alten Microsoft Internet Explorer Versionen (< IE7) korrekt darzustellen benötigst du einen
"hack", mehr dazu erfährst du hier im Forum (Suche: "png fix").

Zur zweiten:

Code:
.opacity {
   height: 500px;
   opacity: 0.8;
}
div#text {
   /* auf irgendeine weise über dem halbtransparentem element platzieren */
}

<div class="opacity"></div>
<div id="text">text</div>


Zuletzt bearbeitet von m am Di 05.05.2009 20:35, insgesamt 3-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
TomPee
Threadersteller

Dabei seit: 19.12.2004
Ort: Hannover / Göttingen
Alter: 43
Geschlecht: Männlich
Verfasst Di 05.05.2009 21:08
Titel

Antworten mit Zitat Zum Seitenanfang

*Thumbs up!* Super. So geht's. Muchas Gracias.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
 
Ähnliche Themen Text hinter transparentem PNG anklicken
InDesign Tabelle Text verschoben
Login-System funktionier nur HALB
"Über"-Schrift mit Text horizontal darstellen ohne Tabelle
Höhe aus Tabelle auslesen und in andere Tabelle einfügen
jpg mit transparentem Hintergrund abspeichern
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.