Transparente Box vor Hintergrund
Transparente Box vor Hintergrund
Vorsicht:
Der meiste code ist nicht auf meinem Mist gewachsen. Ich hab nur alle verfügbaren Resourcen
vereinfacht und für den speziellen Fall zusammengefasst.
Bitte beachtet die copyrights in den einzelnen javascripts!
Schon immer wollte ich über ein vorhandenes Hintergrundbild ein halbtransparentes *.png (wiki ->
*.png)drübersetzen. Das funktioniert zwar mit dem Opera und Firefox recht gut, doch der IE sperrt sich
dagegen und will diese Alphatransparenz des *.png files nicht anzeigen, sondern macht das Bild
einfach opak.
Bilder sagen mehr als Worte. Das wollte ich für alle Browser möglich machen:
Die weißeren Kästchen sollten egal wo positioniert werden und sollten jeglichen html code anzeigen
können. (Schlagwort: div)
Zuerst die 'einfache' html datei:
<html>
<head>
<style type="text/css">
<!--
#one { width:100px }
#two { width:100px }
-->
</style>
<script language="javascript" src="/browserd.js" type="text/javascript"><
<script language="javascript" src="/opacity.js" type="text/javascript"></
<script language="javascript" src="/transbg.js" type="text/javascript"></
</head>
<body onload="init()">
<div style="background-image:url(background.jpg); background-repeat:no-r
<div id="one" style="margin-left:150px">
<br><br>asdf<br><br>
</div>
<br>
<br>
<div id="two">
<br><br>asdf2<br><br>
</div>
<br>
<br>
Für den etwas firmeren html Konsument gibts eigentlich kaum was zu erklären.
Ein paar Details:
<style type="text/css">
<!--
#one { width:100px }
#two { width:100px }
-->
</style>
ich definiere mir hier die beiden Felder in der Breite. Das ist leider notwendig (man könnte ja auch
100% nehmen wenn man will)
Hier sind natürlich alle css Spielereien möglich (Rahmen, Innen-Außenabstand ...)
<script language="javascript" src="/browserd.js" type="text/javascript"></script>
<script language="javascript" src="/opacity.js" type="text/javascript"></script>
<script language="javascript" src="/transbg.js" type="text/javascript"></script>
hier lade ich mir die benötigten javascripts (die wie gesagt nicht von mir kommen). Bei denen muß man
normalerweise nichts ändern.
<div style="background-image:url(background.jpg); background-repeat:no-repeat;">
hier mache ich mir einen bereich mit einem Hintergrundbild das sich nicht wiederholen soll.
Beispielsweise ist es möglich das Hintergrundbild im body zu definieren.
<div id="one" style="margin-left:150px">
<br><br>asdf<br><br>
</div>
hier definierte ich das erste Kästchen mit dem Abstand von 150px von links
ebenso das andere Kästchen.
Das Wichtige:
- im css müssen die id's aufgeführt werden (#one und #two)
- die div's müssen die id's die im css stehen benannt werden (Achtung: die id's dürfen nicht mehr als EINMAL vorkommen! (hat mit dem javascript zu tun)
- mein grünes Hintergrundbild ist die Datei background.jpg
- das weiße Kästchen ist das kleine Bildchen trans.png (nur 1px groß), das eigentlich weiß ist, aber eine Alphatransparenz hat (wurde so hergestellt: - neues Bild mit 1x1 Pixel mit transparentem Hintergrund - neue Ebene eingefügt - auf diese Ebene dann einen weißen Klecks - diese Ebene in der Transparenz ein wenig runtergedreht (so auf 50%) - die Datei als *.png mit dem Zusatz "Alphatransparenz verwenden" gespeichert)
Natürlich kann man andere Dateien (nicht nur so was weißes) nehmen. Z.B. andere Bilder mit
einer Alphatransparenz. Lasst euch was einfallen (ich weiß, das ist der kniffeligste Punkt)
Jetzt solltet ihr schonmal das komplette Paket runterladen und mal ausprobieren. Bitte beachtet, dass
javascript aktiviert is (IE blockt das offline erst!)
Hoffendlich funktioniert alles. Probiert aus, ob ihr die div's wo anders positionieren könnt, ob anderer
text reinpasst ... etc...
Etwas mehr ins Detail (Fragen/Antwortenspiel):
Ich hab mehr als zwei Kästchen. Was mach ich da?
- Defniere im head der html Datei einen weiteren Punkt so wie #one und #two, der halt dann #three (etc.) heißt.
- mach natürlich ein neues div auf, der du die id=#three gibst
- öffne die Datei transbg.js und füge ähnlich wie schon vorhanden einen Eintrag mit der Zeile #three ein
Ich möchte kein weißes Kästchen, sondern eine andere Datei mit einem anderen Namen/Pfad!
- öffne die Datei transbg.js
- in dem 'trans' kannst du deinen Pfad/Namen jetzt ändern. Der Abschluss mit .png wird automatisch mit eingefügt
Ich hoffe ich habe euch erfolgreich geholfen, das zu realisieren.
Hier gibt's die zip Datei: transparent.zip
