Axel Richter: Hintergrundbild wird verdeckt...............

Beitrag lesen

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