PNG im IE

razgoolyy · 10. Mai 2006

Hi,

Ich habe bei mir eine PNG Datei als Hintergrundbild definiert im CSS File. Und nun ist das was Transparent sein soll nicht transparent im IE. Dafür habe ich ein JScript gefunden, dies funtioniert aber nur für <img> Tags und nicht in dem CSS

Das Script sieht so aus:

Code:

var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])

if ((version >= 5.5) && (document.body.filters)) 
{
 for(var i=0; i<document.images.length; i++)
 {
 var img = document.images[i]
 var imgName = img.src.toUpperCase()
 if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
 {
 var imgID = (img.id) ? "id='" + img.id + "' " : ""
 var imgClass = (img.className) ? "class='" + img.className + "' " : ""
 var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
 var imgStyle = "display:inline-block;" + img.style.cssText 
 if (img.align == "left") imgStyle = "float:left;" + imgStyle
 if (img.align == "right") imgStyle = "float:right;" + imgStyle
 if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
 var strNewHTML = "<span " + imgID + imgClass + imgTitle
 + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
 + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
 + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>" 
 img.outerHTML = strNewHTML
 i = i-1
 }
 }
}

Jetz meine Frage, könnte mir evt jemand das Script so schreiben das es auch im CSS anwendbar ist, also das es auch Bilder "umbearbeitet" welche im CSS definiert sind?

Meine Seite:

Code:

<head>
<!--[if lt IE 7]>
<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
<!--
body {
 background-repeat:repeat-y;
 background-attachment: fixed;
 background-image: url(../bilder/background.jpg);
 background-position: center center;
}
#box {
 background-image:url("../bilder/main.png");
 background-repeat:no-repeat;
 height:80em;
 width:100%;
}

-->
</style>
</head>

<body>
 <div id="box">
 
 </div>
</body>
</html>

Es geht um das main.png als Hintergrundbild für die Box...
Ich hoff ich habe micht verständlich ausgedrückt, sonst fragen!

Ich danke schon im Voraues...

Anzeige

lilithpro · 10. Mai 2006

Okay, es funktioniert auch so (als Hintergrundbild für einen <span> oder <div> tag, beispiel:

Code:

<div style="width:800px;height:1374px;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='grund.png',sizingmethod='scale');">&nbsp;</div>

für deine css datei:

Code:

#box {
 width:xxxpx;
 height:xxxpx
 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='grund.png',sizingmethod='scale');
}

hoffe es funktioniert bei dir, bei mir hats funktioniert.

wenn ich dir geholfen habe -> 10 wäre schön

Der nachteil ist: entweder es sieht im ie ordentlich aus oder im mozilla, wenn du eine fallunterscheidung machen willst, musst du es mit javascript machen.

razgoolyy · 17. Mai 2006

hi,

danke erst mals für deine Mühe...
ja so geht das, es zeigt es Korrekt an im IE, aber dafür garnicht mehr im Firefox... ?(
10er kriegst du trotzdem... :]

thx...

Nützliche Suchen

PNG im IE

Videos zum Themenbereich