ʫ

Sie haben den Artikel erfolgreich in den Warenkorb gelegt.
Was möchten Sie als nächstes tun?

Weiter einkaufen Zur Kasse

ȭ
Transparentes Div

Transparentes Div mit CSS

Jeder Webdesigner sieht die Vorteile der neuen CSS Standards - viele der Aufgaben, bei der Grafikprogrammierung erforderlich wurde, können nun mit CSS erledigt werden. Um das zu unterstützen, werden die Browser mit jedem neuen Release immer flexibler was Kompatibilität von CSS3 und HTML5 Eigenschaften angeht. Eine solche Aufgabe, die nun alle neuen Browser gut beherrschen, ist die Anzeige vom einem Transparent Div. Sie können als Programmierer einfach CSS einsetzen, um einer Div Ebene Transparenz in beliebigem Grad und Farbe zu vergeben.

Problematik - transparentes Div

Transparent DivDie Ausgangslage ist es, dass Sie einen schönen Hintergrund haben und gerne hätten, dass die darauf positionierten Containern ein bisschen durchsichtig sind, so dass der Hintergrund unter Ihrem Inhalt zu "spüren" ist. Jedoch sollte diese Transparenz nur so eingerichtet sein, so dass der Inhalt problemlos betrachtet werden kann. Dies war bisher immer mit einer transparenten PNG oder GIF Grafik möglich. Diese musste von einem Grafiker erstellt und vorbereitet werden. Und wehe die Div Transparenz ist zu schwach oder zu stärk, so muss ein neues Bild entworfen werden, die als Hintergrundgrafik Ihres Containers gesetzt wird. Nun betrachten wir den Fall, wo wir selber eine solche Grafik aufbereiten, bzw. wo wir selber unseren Div Ebenen eine Durchsichtigkeit vergeben.

Transparent Div - Lösung

Betrachten wir die Ebene:

<div style="background-color: #fff; border: 1px solid #333;">
   <p>Mein Text</p>
   <p>Und einen anderen Absatz hier gepostet</p>
</div>

Diese Div Ebene enthält zwei Absätze, die auf einem weißen Hintergrund stehen. Dazu kommt einen 1 pixel Rahmen im Schwarz. Wenn Sie dieser Ebene nun Transparenz vergeben wollen, so müssten Sie das machen:

<div style="filter: alpha(opacity=80); opacity: 0.8; -moz-opacity: 0.8; background-color: #fff; border: 1px solid #333;">
   <p>Mein Text</p>
   <p>Und einen anderen Absatz hier gepostet</p>
</div>

Diese Ebene ist nun zu 80% durchsichtig, wie das Beispiel zeigt. Sie brauchen und die Werte zu verändern (zwischen 0.1 und 1.0), um einen anderen Grad der Transparenz zu erreichen. Dazu kommt, dass Sie frei die Hintergrundfarbe auswählen können, so dass das transparente Div sich nach dem Hintergrund besser anpasst.

Hinweis: Bitte beachten Sie, dass wir hier alle Browser berücksichtigen und deswegen gleich drei CSS Anweisungen machen, um unser transparentes Div unter allen Browsern sicherzustellen. Beispielsweise ist "filter" eine proprietäre Eigenschaft von Internet Explorer und wirkt nur dort.

Hinweis 2 - Nebeneffekte: Bitte, beachten Sie, dass wenn Sie einem Div Transparenz vergeben, so werden sämtliche Inhalte, die im Div enthalten sind, mit dieser Transparenz gerendert. Das heißt in diesem Beispiel, dass unseren schwarzen Rahmen auch nicht mehr schwarz, sondern grau wird je nach dem welchen Transparenzgrad mittels CSS eingesetzt ist. Auch Wenn Ihr Div Bilder enthält, so erhalten sie auch eine Transparenz. Um dies zu umgehen, sollten Sie folgende Schritte folgen:

  • Sie erstellen ein großes Div, was als style "position: relative" hat. Dies wird allen enthaltenen absolutpositionierten Divs zwingen, sich darin zu bewegen
  • Sie erstellen ein transparentes und absolut positioniertes Div mit den obigen CSS Anweisungen und geben es eine Position im obigen Container mittels "left" und "top"
  • Sie erstellen ein zweites Div, was nicht mehr transparent ist und einfach "zufällig" über dem transparenten Div per absolute Positionierung steht. Somit ist der Inhalt optisch drin, jedoch nicht programmiertechnisch. Nun übernehmen Ihre Inhalte nichts von der Durchsichtigkeit.
û