XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   Knowledge Base (http://xhtmlforum.de/forumdisplay.php?f=79)
-   -   alpha-transparente PNG im Internet Explorer (http://xhtmlforum.de/showthread.php?t=38860)

ulle 21.02.2006 21:16

alpha-transparente PNG im Internet Explorer
 
Liste der Anhänge anzeigen (Anzahl: 1)
Hallo,

ich habe da heute folgendes im BLOG von Martin Labuschin gefunden:

Transparenz und Anzeige von PNG im Internet Explorer

Das es geht war mir bekannt, aber das es so einfach ist nicht.
Ich habe eine TEST-Case zusamengestellt und ein PNG angehängt.
Viel Spaß damit und Danke an Martin Labuschin!

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de-DE" lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>xxxx</title>

<style type="text/css">
/*<![CDATA[*/


p                        {
                        float: left;
                       
                        width: 200px;
                        height:200px;
                       
                        margin: 1em;
                       
                        background-color: #FF9900;
                        background-repeat: no-repeat;
                        background-position: top right;
                        }
                       
* html p
                        {
                        /*
                        * http://msdn.microsoft.com/workshop/author/filter/reference/filters/alphaimageloader.asp
                        */
                        filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='alphatransparency.png', sizingMethod='scale');       
                        }
                       
                       
html > body p
                        {
                        background-image: url(alphatransparency.png);
                        }
                       
#blua                {
                        background-color: #2299FF;
                        }
#red                {
                        background-color: #FF2200;
                        }
#yellow                {
                        background-color: #FFEE00;
                        }
/*]]>*/
</style>


</head><body>



alphatransparency</p>
<p id="blua">alphatransparency</p>
<p id="red">alphatransparency</p>
<p id="yellow">alphatransparency</p>


</body></html>


laborix 21.02.2006 22:23

Re: alpha-transparente PNG im Internet Explorer
 
Zitat:

Zitat von ulle
Hallo,

ich habe da heute folgendes im BLOG von Martin Labuschin gefunden:

Transparenz und Anzeige von PNG im Internet Explorer

Für alle die den eingesetzten Browser auf PNG Alphakanal Transparenz testen wollen füge ich hier ein zusätzlichen "Test-Case" ein:

www.aadmm.de/de/test/gf.htm
Hier kann PNG Alphakanal Transparenz mit Farbverlauf und Texten getestet werden.

Zur Info:

- MS Internet Explorer 6 SP2 kann ... Siehe //Edit und Korrektur vom 16.08.2006
- MS Internet Explorer 7.0 beta 1 und beta 2 unterstützen PNG Alphakanal Transparenz vollständig, inkl. PNG Transparenz

//Edit und Korrektur: 16.08.2006

Korrektur:
MS Internet Explorer bis einschliesslich 6 SP2 kann nicht mit PNG Transparenz umgehen, die mehr als 256 Farben haben. Ist die PNG-Grafik mit 256 Farben gespeichert, so kann der Internet Explorer 6 diese 256 Farben PNG Grafik mit Transparenz ohne Hilfsmittel darstellen.
Edit:
MS Internet Explorer 7.0 beta 1, 2 und 3 unterstützen PNG Alphakanal Transparenz vollständig, inkl. PNG Transparenz
Edit: die zweite...
MS Internet Explorer 8.0 beta 1 und 2 unterstützt PNG Alphakanal Transparenz vollständig, inkl. PNG Transparenz

ulle 22.02.2006 08:30

@laborix

Danke für Deine Infos zum IE7 und das zusätzlich TEST-Case. Demnach wird es wohl wichtig den Filter vor dem IE7 zu verstecken und da er ja erst ab dem IE5.5 funktioniert nun noch folgender CODE, der dieses Problem mit Hilfe von Conditional Comments berücksichtigt. Somit ist auch der CSS-Validator zufrieden!

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de-DE" lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>xxxx</title>

<style type="text/css">
/*<![CDATA[*/


p                        {
                        width: 200px;
                        height:200px;
                       
                        margin: 1em;
                       
                        background-color: #FF9900;
                        background-image: url(alphatransparency.png);
                        background-repeat: no-repeat;
                        background-position: top right;
                        }
         
/*]]>*/
</style>

<!--[if lt IE 7]>
  <!--[if gte IE 5.500]>
                   
                <style type="text/css">
                       
                p                        {
                                background-image: none;
                                filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='alphatransparency.png', sizingMethod='scale');   
                                }
                       
                </style>
   
  <![endif]-->
<![endif]-->


</head><body>



alphatransparency</p>

</body></html>


ulle 22.02.2006 15:53

Nachsatz:

Die oben gezeigte CC Kaskade kommt nicht durch den W3C-Validator (XML)!

Ein CSS @import mit einfachen Hochkomma ohne Blank schliesst IE5/IE5Mac aus!

siehe auch:
http://www.dithered.com/css_filters/css_only/
http://www.dithered.com/css_filters/..._no_space.html


Durch die Anwendung der entsprechenden CSS @import-Rule kann die CC-Kaskade entfallen, bzw. auf den IE 7 reduziert werden. siehe CODE Bespiel.

Code:

<!--[if lt IE 7]>

        <style type="text/css">
        @import'filter.css';
        </style>
       
<![endif]-->


daro 29.03.2006 00:30

hier ein javascript snippet, das im ie alle png bilder richtig anzeigen lässt
weiß leider nich mehr wo ichs gefunden hatte

Code:

function correctPNG() // correctly handle PNG transparency in Win IE 5.5 or higher.
  {
  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
            }
      }
  }
window.attachEvent("onload", correctPNG);


ulle 29.03.2006 19:37

@daro

Ich hoffe es ist in Deinem Sinne dass ich die Informationen zu Deinem Snippet erweitere!

Diese Funktion wendet den MS-Filter auf alle img-Tags die PNG enthalten an, also auf Markup und nicht auf CSS-Definitionen (background-image)!

Im Markup funktioniert es auch wunderbar. Nur sind transparente Bilder meist Sytle-Elemente in einem WEB-Document und somit niemals in einem img-Tag. Eine Informationsgrafik oder ein Foto sind ja selten transparent.

Warum Gestaltungs-Elemente nichts im img-Tag zu suchen haben, dieses Thema sollte in diesem THREAD nicht diskutiert werden. (Suchfunktion)

daro 29.03.2006 23:55

Zitat:

Warum Gestaltungs-Elemente nichts im img-Tag zu suchen haben, dieses Thema sollte in diesem THREAD nicht diskutiert werden. (Suchfunktion)
für gstaltungs elemente wäre das ja auch unsinn, da diese ja immer gleich sind
und dass bilder/photos keine transparenz brauchen würde ich ncith sagen

zb könnte man vorschaubilder mit aufwendigen schatten versehen (auch wenn zahlreiche css technijen dafür gibt, allerdings ist bei denen zusätzliches markup erforderlich)

BZ 21.04.2006 11:27

Hallo Forum,

ich möchte ebenfalls ein transparentes PNG als Hintergrund anzeigen lassen.
Nun habe ich dank zahlreicher Suchen hier und bei Google mittlerweile eine Lösung zusammengepfriemelt, mit der ich schon fast glücklich bin. Eine Kleinigkeit fehlt mir jedoch noch zu meinem vollkommenen Glück:

Da das PNG über die ganze Fensterbreite geht (lies: die Grafik ist 2500 Pixel breit, um möglichst alle Screengrößen abzudecken) und ein Element enthält, das immer in der Mitte sein sollte, müßte das Hintergrundbild noch irgendwie zentriert sein.


Code:

#topnavi {
        position:absolute;
        top:0;
        left:0;
        height:300px;
        width:100%;
        background-position: left bottom;
        }
       
* html #topnavi {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/hg_navitab.png', sizingMethod='crop');
        }

html > body #topnavi {
        background:transparent url(images/hg_navitab.png) center bottom no-repeat;
        }

Mit der Lösung von oben (bzw. der Angabe von background-position) klappt das aber im IE noch nicht (der FF greift natürlich auf das korrekte CSS zurück und zeigt das HG-Bild korrekt an...)

Gibt es irgendeine Möglichkeit, den AlphaImageLoader im Container zu zentrieren?

ulle 21.04.2006 21:51

Zitat:

Zitat von BZ
......
Gibt es irgendeine Möglichkeit, den AlphaImageLoader im Container zu zentrieren?

Nein, das durch den IE:Filter definierte Bild ersteckt/skaliert sich immer über die gesamte Größe des definierten Container. CSS-Hintergrund-Eigenschaften sind nicht auf den IE:Filter anwendbar, zumindest mir nicht bekannt und auch negativ getestet.

Tipp: Mit CSS-Layer arbeiten

hups 07.05.2006 13:07

png bilder
 
hallo ich habe eine e107 homepage und der ie zeigt manche png bilder bzw tranparente nicht an wie und wo muss ich den hier beschrieebenen code eingeben hab ne style.css und ne theme.php


ich hab ie6.


Alle Zeitangaben in WEZ +2. Es ist jetzt 03:05 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2018, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2018