Guten Morgen zusammen,
das Problem der Darstellung von halbtransparenten Grafiken im PNG-Format ist bekannt und es gibt auch eine gute Lösung für diesen Fall. Mit einer kleinen Datei namens pngbehavior.htc und der Zuweisung an das
img-Tag per CSS, ist die Sache schnell erledigt.
Mein Problem ist allerdings, dass der entsprechende Alpha-Channel nicht auf ein
Tag angewendet werden soll, sondern auf eines seiner Attribute, genauer auf
background-image. Leider hilft das Zuweisen des Filters - auf z.B. die ID #schatten - nicht weiter und die Hintergrundgrafik des entsprechend ausgezeichneten
<div>'s, zeigt keine Spur von Transparenz.
Eventuell habe ich auch nur etwas übersehen. Es wäre super, wenn jemand eine Lösung für mich hätte.
----------------------------------
Hier nochmal der Code für diejenigen, denen die Lösung für transparente PNGs nicht bekannt ist:
pngbehavior.htc (einfach im root abspeichern und im CSS drauf verweisen):
Code:
<public:component>
<public:attach event="onpropertychange" onevent="propertyChanged()" />
<script>
var supported = /MSIE (5\.5)|[6789]/.test(navigator.userAgent) && navigator.platform == "Win32";
var realSrc;
var blankSrc = "blank.gif";
if (supported) fixImage();
function propertyChanged() {
if (!supported) return;
var pName = event.propertyName;
if (pName != "src") return;
// if not set to blank
if ( ! new RegExp(blankSrc).test(src))
fixImage();
};
function fixImage() {
// get src
var src = element.src;
// check for real change
if (src == realSrc) {
element.src = blankSrc;
return;
}
if ( ! new RegExp(blankSrc).test(src)) {
// backup old src
realSrc = src;
}
// test for png
if ( /\.png$/.test( realSrc.toLowerCase() ) ) {
// set blank image
element.src = blankSrc;
// set filter
element.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" +
src + "',sizingMethod='scale')";
}
else {
// remove filter
element.runtimeStyle.filter = "";
}
}
</script>
</public:component>
Das CSSheet:
Code:
<style type="text/css">
img {
behavior: url("pngbehavior.htc");
}
</style>
Quelle:
http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html
