« »

Ein Hauch von Nichts…

Web Designer ist das Problem bekannt: “Wie mache ich einen transparenten Hintergrund ?” Das Problem besteht nicht darin, ein DIV transparent zu machen. Sowohl Mozilla Browser verfügen mit der CSS Funktion “-moz-opacity:0.5″ als auch der Internet Explorer mit “filter:alpha(opacity=50)” verfügen über eine solche Funktion. Das Problem bestand bisher jedoch darin, dass nicht nur der Hintergrund, sondern auch darüber liegende Schrift oder Bilder transparent werden. Meine Methode verschafft hier Abhilfe.Der Clou hierbei ist, dass sich die Länge des Feldes automatisch der Textlänge anpasst und nichts vorher definiert sein muss. AuÃ?erdem kann man wie im Beispielcode noch einen nicht transparenten Rahmen um das DIV bauen.

Hier der Code:

<div id="buttons" style="position:relative; border-width: 2px;border-style: solid;border-color: black;">
<div style="width:100%; height:100%; position:absolute; z-index:2; top:0px; filter:alpha(opacity=50); -moz-opacity:.50;opacity:.50; background-image:url(http://img.hostunity.net/http://www.add-ons.de/nina/maipaar.jpg);"> </div>
<div style="position:relative; top:0px; z-index:3;margin:5px;">
<b>Hier stünde nun der entsprechende Inhalt</b>
</div>
</div>

Beispiel:

Hallo Welt !
man kann nun so ziemlich alles schreiben was man will, das div
passt sich automatisch in Länge und Breite an
ne feine Sache ! :D

Einen Kommentar schreiben