Hintergrundbild wird verdeckt...............

[Ich]

So, mein problem ist folgendes: Ich habe innerhalb einer tabelle mittels einer css .class ein hintergrundbild rechtsstehend angeordnet. Jetzt will ich innerhalb dieser tabelle weitere tabellen einrichten bzw. einzelne zeilen mit einer anderen (!) hintergrundfarbe versehen. Diese neuen tabellen, bzw Zellen mit anderen bgcolors verdecken dann allerdings immer die eigentliche hintergrundgrafik...hat jemand hierfür ein lösung? danke im voraus

christian

[Axel Richter]

Hallo,

So, mein problem ist folgendes: Ich habe innerhalb einer tabelle mittels einer css .class ein hintergrundbild rechtsstehend angeordnet. Jetzt will ich innerhalb dieser tabelle weitere tabellen einrichten bzw. einzelne zeilen mit einer anderen (!) hintergrundfarbe versehen. Diese neuen tabellen, bzw Zellen mit anderen bgcolors verdecken dann allerdings immer die eigentliche hintergrundgrafik...hat jemand hierfür ein lösung? danke im voraus

Eine Lösung wofür?

Es ist praktisch die Haupteigenschaft eines _Hintergrund_bildes, im _Hintergrund_ zu stehen und also von den Elementen im _Vordergrund_ überdeckt zu werden. Es sei denn, diese Elemente wären durchsichtig (transparent).

viele Grüße

Axel

[ich]

hallo!

jupp....ist es....NUR: aus designtechnischen gründen möchte ich eine tabelle (ein div tag oder was auch immer, jedenfalls mit einer anderen hintergrundfarbe als die des eigentlichen bg's) eben über das bild (es handelt sich um einen vertikalen schriftzug, vielleicht ist es so leichter zu verstehen...), wobei sich dabei eben nur die hg farbe ändern soll, und nicht der gesamte schriftzug verschwinden soll....

ist relativ schwer zu erklären leider, hoffe ihr konntet verstehen, was gemeint ist...

chris

[wahsaga]

hi,

aus designtechnischen gründen möchte ich eine tabelle (ein div tag oder was auch immer, jedenfalls mit einer anderen hintergrundfarbe als die des eigentlichen bg's) eben über das bild (es handelt sich um einen vertikalen schriftzug, vielleicht ist es so leichter zu verstehen...), wobei sich dabei eben nur die hg farbe ändern soll, und nicht der gesamte schriftzug verschwinden soll....

und eben das ist so nicht möglich, wie dir Axel ja gerade schon sagte.
wenn du einem element eine hintergrundfarbe gibst, dann kannst du nicht erwarten, dass etwas anderes, was "darunter" liegt, noch durchscheint.

aber warum denn überhaupt zwei elemente?

warum nicht _ein_ element mit hintergrundfarbe _und_ hintergrundbild in der ecke.
dort, wo dein hintergrundbild transparente stellen hat, scheint dann die hintergrundfarbe durch.

gruss,
wahsaga

[Jeena Paradies]

Hallo ich,

wobei sich dabei eben nur die hg farbe ändern soll, und nicht der gesamte schriftzug verschwinden soll....

Versuche das wass du machen willst erst mal in einem Grafikprogramm. Das wird nicht funktionieren, denn woher soll das Programm wissen welche Pixel denn von dir aus gesehen zum "Hintergrund" gehören und welche zur Schrift. Für das Programm ist alles Hintergrund.

Wenn du einen Schriftzug haben willst der auf verschiedenen Hintergrundfarben dargestellt wird muss dieser ganz oben sein und seie Hintergrundfarbe muss durchsichtig sein. Dann wird dieser dargestellt und die Farbe des dahinter liegenden Hintergrundes wird durchschimmern.

Das funktioniert aber nicht mit jpeg Bildern. Du musst es als GIF abspeichern damit die Transparenz erhalten bleibt. Bei schrift ist das GIF Format aber nicht so zu empfehlen da es keine Stufenlose Transparenz kennt so dass die Schrift sehr pixelig wirken wird. Für so etwas ist am besten das PNG Format. Leider funktioniert die Stufenlose Transparenz im IE nicht.

Dafür wiederum gibt es aber einen Workaround der im IE 5.x+ funktioniert wenn JavaScript eingeschalten ist. Hier der Link dazu: http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html

Ich hoffe ich habe jetzt verstanden was du machen wolltest.

Grüße
Jeena Paradies

[Axel Richter]

Hallo,

jupp....ist es....NUR: aus designtechnischen gründen möchte ich eine tabelle (ein div tag oder was auch immer, jedenfalls mit einer anderen hintergrundfarbe als die des eigentlichen bg's) eben über das bild (es handelt sich um einen vertikalen schriftzug, vielleicht ist es so leichter zu verstehen...), wobei sich dabei eben nur die hg farbe ändern soll, und nicht der gesamte schriftzug verschwinden soll....

Das wird nur mit mehreren Ebenen (Layern) gehen. Eine Ebene, ganz hinten, mit der eigentlichen Hintergrundfarbe. Darüber eine Ebene mit der anderen Hintergrundfarbe. Darüber die Ebene mit dem Hintergrundtext und einem transparenten Hintergrund. Darüber die Ebene mit dem Inhalt, der scheinbar die andere Hintergrundfarbe haben soll. Diese Ebene muss exakt über der Ebene mit der anderen Hintergrundfarbe stehen.

Mit HTML kann man soetwas allerdings kaum lösen. Eine Skizze könnte so aussehen:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Layer-Spiele</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
<!--
html, body {
  padding:0;
  margin:0;
  width:100%;
  height:100%;
}
div#bgLayer {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background-color:#00AEAD;
}
div#bgText {
  position:absolute;
  top:0;
  left:200px;
  width:20px;
  height:100%;
  text-align:center;
  font-size:20px;
  color:#003031;
}
div#otherBGLayer {
  position:absolute;
  top:150px;
  left:150px;
  width:200px;
  height:150px;
  padding:10px;
  background-color:#FF7D7B;
}
div#otherTextLayer {
  position:absolute;
  top:150px;
  left:150px;
  width:200px;
  height:150px;
  padding:10px;
}
-->
</style>
</head>
<body>
<div id="bgLayer"> </div>
<div id="otherBGLayer"> </div>
<div id="bgText">H i e r   d e r   S c h r i f t z u g   m i t   t r a n s p a r e n t e m   H i n t e r g r u n d</div>
<div id="otherTextLayer">Dieser Text steht auf der selben Position, wie der Layer otherBGLayer. Er steht aber über dem Layer bgText. Er ist im Hintergrung transparent. Es sieht also nur so aus, als hätte er die andere Hintergrundfarbe.</div>
</body>
</html>

viele Grüße

Axel