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);

[WalnutXP]

Soweit ich weiß macht obiges JavaScript das selbe, nur dass man dafür halt keine extra Klasse braucht. Interessant ist allerdings die Tatsache, dass es auch ausgeführt wird, wenn JavaScript deaktiviert ist.

[Sven]

Es gibt da noch ein kleines Problem.... Links auf derart vom IE dargestellten Hintergrundbildern funktionieren normalerweise nicht.
Abhilfe schaffen folgende Maßnahmen:
a) cursor: pointer für das zugehörige Element setzen (unbefriedigende Lösung)
b) Die Größe der Hintergrundkachel durch Herumprobiererei so setzen (zB 1x4 Pixel), daß der IE das futtert (unbefriedigend - aber brauchbare Ergebnisse)
c) a: {position: relative;} (löst sämtliche Probleme )

[Sven]

Noch etwas: input und textarea weisen auch diese Probleme auf, hier hilft es allerdings nicht einfach
input, textarea {position:relative;}
zu definieren.
Stattdessen kann man aber folgendes machen:
Schließt die Tags in ein <span> ein dem ihr folgende Werte zuweist:
position:relative; z-index:0;

Beispiel:
<span style="position:relative; z-index:0;"><input type="text" /></span>

[Alexander]

Als ich diesen Thread zum ersten Mal gelesen hab,dachte ich,dass ich sowas nie bräuchte.Aber grad hab ich mit .png Grafiken rumgespielt und diesen Thread wieder auskramen müssen.Leider isses mir dann doch etwas zu hoch,was hier an Tipps gegeben wird,zumal für meine Bedürfnisse auf .gif reicht.Aber schon krass,was man anstellen muss,um dem IE ein .png als transparent zu verkaufen

[Antr4ks.de]

Danke für die Tipps, der Thread ist sehr hilfreich
Habe gerade auch ein Problem - und die letzte Lösung auf die ich gestossen bin und einigermaßen gut lief waren transparente *.png's. Nun, ich hab ein transparentes (60% transparent) grünes Bild als Hintergrund einer Tabelle definiert. Firefox liefert mir den gewünschten Effekt, doch der IE bleibt eben stur. Nach dem Ausprobieren der Tipps hier, bin ich zwar inzwischen soweit, das der IE die PNG jetzt auch Transparent ausgibt und die Links darüber funktionieren, aber der Firefox zeigt an der Stelle nun garnichts mehr an

Jetzt ist also meine einziges Problem nur noch eine Browserweiche - aber ich glaube da wird es schon eine Möglichkeit geben.

http://antr4ks.de/trans.html - so schauts derzeit aus

€: Öhm moment mal. Auf meinem Webspace zeigen beide Browser den Hintergrund transparent an. Offline zeigt der Firefox bei mir garnichts an Oo