Transparente .png im IE - eine Lösung

[Sven]

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">&nbsp;</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

[EEBKiller]

Öhm, und der Alpha-Kanal (also die Transparenz ist IM Bild festgelegt, nicht etwa durch CSS) ?

Das hieße ja, dass man nen komplexen Alpha-Kanal mit mehreren Stufen einbauen und man dadurch ein Pic basteln welches verscheidene transparenzen hat. - Goil

€DIT:

OMG, das funzt !

www.eeb-welt.de/alpha/

Der Rote Kreis ist ein Pic, bei dem von Innen nach aussen die Transparanz zunimmt. Der Hintergrund sind 4 Tabellenzellen

[Stealthman]

Woah is das geil...
Sven ich liebe dich

gleich ma ausprobieren...

[Sven]

Update:
Es gibt einen Bug im IE durch den Links über einem solchen transparenten Bild nicht mehr funktionieren!
Nur durch herumprobieren mit der Kachelgröße lässt sich das vermeiden - aber das ist bei jeder Site unterschiedlich.
Bei meinem aktuellen Projekt klappt es zB mit 4x1 Pixel, andere berichten von 2x2 oder auch 2x10 Pixel.

[WalnutXP]

Hallo leutz, ich wollte nur mitteilen dass ich den Alpha Image Loader schon seit längerer Zeit sehr erfolgreich einsetze.

Man kann dazu einfach diese Datei herunterladen. Dann braucht man dazu noch eine blank.gif. Beide Datein müssen ins Hauptverzeichnis der Homepage kopiert werden.

Anschließend in eurem CSS einfach folgendes einfügen:

img {
border-style: none;
behavior: url("pngbehavior.htc");
}

[Sven]

Naja, ich zieh es vor auf JavaScript weitgehend zu verzichten.
Lösungen mit JavaScript gibt's für die Problematik wie Sand am Meer.

Ich hab übrigens mittlerweile eine noch elegantere Möglichkeit gefunden:

background-image:url(/transp.png);
background:expression("none");
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='transp.png', sizingMethod='scale', enabled=true);