Sven
21-01-2005, 16:40
Es gibt eine Möglichkeit auch im IE transparente .png Grafiken darzustellen.
Dazu ist die Verwendung des MS proprietären Filters progid:DXImageTransform.Microsoft.AlphaImageLoader notwendig.
Da dieser nicht als HTML durchgeht muss er in einem externen CSS verwendet werden (geht auch inline - aber dann gibt's keine Validierung mehr).
Nun kommt das Problem auf daß andere Browser das nicht kennen und dementsprechend nicht darauf reagieren.
Um dem entgegen zu wirken hab ich zunächst probiert es mit einer einfachen Browserweiche:<link rel="stylesheet" href="/style.css" type="text/css" />
<!--[if gte IE 5]>
<link rel="stylesheet" href="/ie.css" type="text/css" />
<![endif]--> zu realisieren - blöderweise scheint das aber mit dem Filter nicht zu funktionieren weil der IE zuvor schon das normale CSS eingelesen hat (lasse ich den Aufruf der style.css weg und rufe nur die ie.css geht's).
Aber es gibt ja noch mehr Dinge die der IE nicht kann :D
Zum Beispiel 'Class-Selectors'....
Also kann man das so realisieren:
.myDiv {
position:absolute;
left:10px;
top:10px;
height:250px;
width:250px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='test.png', sizingMethod='scale', enabled=true);
z-index:2
}
*[class="myDiv"] {
position:absolute;
left:10px;
top:10px;
height:250px;
width:250px;
background-image:url(test.png);
z-index:2
}
Und das zugehörige Element:
<div class="myDiv"> </div>
Im Anhang sind die 2 Dateien (html und css)
Ein .png mit den Maßen 250x250, grau mit 50% Transparenz, könnt ihr euch ja selbst anlegen ;)
Axo: Aussehen tut's so:
http://www.sst-productions.de/opaque/test.html
Dazu ist die Verwendung des MS proprietären Filters progid:DXImageTransform.Microsoft.AlphaImageLoader notwendig.
Da dieser nicht als HTML durchgeht muss er in einem externen CSS verwendet werden (geht auch inline - aber dann gibt's keine Validierung mehr).
Nun kommt das Problem auf daß andere Browser das nicht kennen und dementsprechend nicht darauf reagieren.
Um dem entgegen zu wirken hab ich zunächst probiert es mit einer einfachen Browserweiche:<link rel="stylesheet" href="/style.css" type="text/css" />
<!--[if gte IE 5]>
<link rel="stylesheet" href="/ie.css" type="text/css" />
<![endif]--> zu realisieren - blöderweise scheint das aber mit dem Filter nicht zu funktionieren weil der IE zuvor schon das normale CSS eingelesen hat (lasse ich den Aufruf der style.css weg und rufe nur die ie.css geht's).
Aber es gibt ja noch mehr Dinge die der IE nicht kann :D
Zum Beispiel 'Class-Selectors'....
Also kann man das so realisieren:
.myDiv {
position:absolute;
left:10px;
top:10px;
height:250px;
width:250px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='test.png', sizingMethod='scale', enabled=true);
z-index:2
}
*[class="myDiv"] {
position:absolute;
left:10px;
top:10px;
height:250px;
width:250px;
background-image:url(test.png);
z-index:2
}
Und das zugehörige Element:
<div class="myDiv"> </div>
Im Anhang sind die 2 Dateien (html und css)
Ein .png mit den Maßen 250x250, grau mit 50% Transparenz, könnt ihr euch ja selbst anlegen ;)
Axo: Aussehen tut's so:
http://www.sst-productions.de/opaque/test.html