am 19.03.2008 um 10:26 Uhr
Grafiken Flash HTML & CSS PHP & MySQL Javascript Fertige Skripte Anderes Statistik
|
|
Anzeigen
|
3x bewertet
Hier ein kleines, aber dennoch sehr nützliches Tutorial. Es beschreibt, wie ihr Div Layer transparent machen könnt.
Nehmen wir also mal an, ihr habt eine ID für euer Div im CSS. Etwa so:
Und im HTML-Dokument natürlich das Div mit entsprechender ID:
Das ist nun ein einfacher weißer Container. Soll dieser nun transparent sein, um eine tolle Hintergrundgrafik durchscheinen zu lassen oder Ähnliches, benötigen wir eine einfache Eigenschaft:
Nun ist unser Div im Firefox schon transparent. Die 0.8 gibt an, dass der Layer zu 80% sichtbar ist. Das kann noch nach euren Wünschen angepasst werden (0.9 = 90%, 0.5 = 50% usw.). Statt opacity, wird auch häufig die Eigenschaft "-moz-opacity" genutzt, die den selben Effekt hat und ebenfalls Werte von 0.00 bis 1.00 annimmt.
Aber natürlich braucht der Internet Explorer (wie immer) eine Extrawurst. Also wird eine weitere Eigenschaft benötigt:
Hier steht die 80 natürlich auch für 80% Deckkraft und kann entsprechend angepasst werden.
Diese Eigenschaften gehören, bis auf opacity, allerdings nicht zu den CSS-Spezifikationen. Daher weiß ich auch nicht, wie die Unterstützung bei anderen Browsern und älteren Versionen aussieht.
Nehmen wir also mal an, ihr habt eine ID für euer Div im CSS. Etwa so:
#Layer
{
background-color: #ffffff;
color: #555555;
font-family: arial, sans-serif;
width: 200px;
height: 400px;
}
Und im HTML-Dokument natürlich das Div mit entsprechender ID:
<body>
<div id="Layer">
Beispieltext
</div>
</body>
Das ist nun ein einfacher weißer Container. Soll dieser nun transparent sein, um eine tolle Hintergrundgrafik durchscheinen zu lassen oder Ähnliches, benötigen wir eine einfache Eigenschaft:
#Layer
{
background-color: #ffffff;
color: #555555;
font-family: arial, sans-serif;
width: 200px;
height: 400px;
opacity: 0.8;
}
Nun ist unser Div im Firefox schon transparent. Die 0.8 gibt an, dass der Layer zu 80% sichtbar ist. Das kann noch nach euren Wünschen angepasst werden (0.9 = 90%, 0.5 = 50% usw.). Statt opacity, wird auch häufig die Eigenschaft "-moz-opacity" genutzt, die den selben Effekt hat und ebenfalls Werte von 0.00 bis 1.00 annimmt.
Aber natürlich braucht der Internet Explorer (wie immer) eine Extrawurst. Also wird eine weitere Eigenschaft benötigt:
#Layer
{
background-color: #ffffff;
color: #555555;
font-family: arial, sans-serif;
width: 200px;
height: 400px;
opacity: 0.8;
filter: alpha(opacity=80);
}
Hier steht die 80 natürlich auch für 80% Deckkraft und kann entsprechend angepasst werden.
Diese Eigenschaften gehören, bis auf opacity, allerdings nicht zu den CSS-Spezifikationen. Daher weiß ich auch nicht, wie die Unterstützung bei anderen Browsern und älteren Versionen aussieht.
12 Kommentare
@ Fr34k das funktioniert vll. im FF nur der IE mag das nich umbedingt immer leiden o.o
Fr34k
oO wirklich? Das sollte meiner Meinung nach auch im IE funktionieren^^ ich bin mir jetzt nicht so sicher, aber eigentlich schon^^ Es sollte ja eh jeder FF benutzen ;) hihi
am 19.03.2008 um 11:08 Uhr
pixelprinzessin
ein div ist sowieso immer transparent wenn du keinen background festlegst..
am 09.12.2008 um 22:55 Uhr
Geht das auch mit Tables? 
am 01.01.2009 um 07:49 Uhr
Nekoji
@Moony: Ich habe es noch nicht ausprobiert, da ich eher selten mit Tabellen arbeite, aber theoretisch sollte sich die Methode auch darauf anwenden lassen.
am 07.04.2009 um 14:14 Uhr
Murderprincess
Mit Tabellen geht′s auch. Die verhalten sich kaum anders als divs.Schönes Tut. Allerdings klappt′s nicht in allen Browsern. :) Das würde ich noch dabei schreiben.
am 21.11.2009 um 00:23 Uhr
llarca
Naja, wenn man es auch in anderen Browsern haben möchte dann lohnt sich ein einigermassen gutes Grafik Programm, wo man die Divs direkt auf das Layout "zeichnet". Ist jedenfalls mein Weg sowas zu machen ;)
am 16.12.2009 um 01:13 Uhr
Kate
cooles tutˆˆ ich hab schon sowas gesuchtˆˆ
am 27.01.2010 um 15:35 Uhr
Babashi
HEy ! Dieses Tut ist sehr hilfreich, hab den Effeckt auch sofort angewendet auf meinem Blog, doch die Bilder schimmern auch durch! Hilfe, was soll ich machen
Wie kann ich es machen, dass dieser Effeckt bei den Bildern ausbleibt ? :Ohttp://misplaced-mirth.blogspot.com
am 29.05.2010 um 12:23 Uhr
Nekoji
@Murderprincess: Steht doch dabei?@Babashi: Meistens erstelle ich mir halb-transprarente Grafiken in Photoshop, die ich dann als PNGs abspeichere und als Hintergrund-Grafik des entsprechenden Divs verwende. So behalten Schrift und Bilder innerhalb des Divs ihre volle Deckkraft, aber der Hintergrund ist durch die Grafik leicht transprarent! ;)
am 30.05.2010 um 13:26 Uhr
Babashi
ah ok cool werd ich gleich mal ausprobieren !
Danke für den Tipp
am 30.05.2010 um 21:22 Uhr
Fr34k
Cool, jetzt weiß ich, wie man es durchschimmern lassen kann. Wenn man es ganz transparent haben will ist das noch einfacher:#Layer{
background-color: transparent;
}
CiAO^^