PNG im IE

Dieses Thema im Forum "Webentwicklung" wurde erstellt von razgoolyy, 10. Mai 2006 .

Status des Themas:
Es sind keine weiteren Antworten möglich.
  1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen
  1. #1 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...
     

  2. Anzeige
    Dealz: stark reduzierte Angebote finden.
  3. #2 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.
     
  4. #3 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...
     

  5. Videos zum Thema
Die Seite wird geladen...
Similar Threads - PNG
  1. Antworten:
    0
    Aufrufe:
    1.513
  2. Antworten:
    7
    Aufrufe:
    4.294
  3. Antworten:
    4
    Aufrufe:
    1.132
  4. Antworten:
    13
    Aufrufe:
    2.195
  5. Antworten:
    14
    Aufrufe:
    1.058
  • Annonce

  • Annonce