Im Blog-Beitrag hatte ich einen jQuery-Ansatz aufgezeigt, wie man PNG-Grafiken im Internet Explorer < 7 transparent darstellen kann. Möglich wurde dies durch die Unterstützung des filter-Attributes.
Doch wie sieht das ganze aus, wenn man PNG-Hintergrundgrafiken einsetzt und diese zB einen transparenten Verlauf haben.
Hier könnte man wieder die scriptseitige Implementierung wählen:
<script type="text/javascript">
$(document).ready(function() {
if ($.browser.msie) {
$(".transpPNG").each(function() {
var img = this.currentStyle.backgroundImage.substr(5).replace("\")", "");
$(this).css({ background: "none",
filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+img+"', sizingMethod='scale')" });
});
}
} );
</script>
Hier wurde eine Selektion auf alle DIV-Elemente mit dem class-Attribute "transpPNG" vorgenommen und die filter-Eigenschaft gesetzt. Wichtig zu wissen ist dabei, dass die background-Eigenschaft auf 'none' gesetzt werden muss. Die Bild-Url wird dabei aus den aktuellen Css-Definitionen ermittelt.
Als jQuery-Erweiterung ergäbe sich dann folgender Code:
<script type="text/javascript">
$(document).ready(function() {
if ($.browser.msie) {
$(".transpPNG").setTransparentBackground(); }
});
$.fn.setTransparentBackground = function() {
return this.each(function() {
var img = this.currentStyle.backgroundImage.substr(5).replace("\")", "");
$(this).css({ background: "none",
filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+img+"', sizingMethod='scale')"
});
});
}
</script>
Ihr Kommentar zu diesem Beitrag: