Tipp: Win Explorer und transparente PNG 24

[Marcus_28]

Hallo ,

ich bin ein absoluter Nob in diesem Thema ich habe auch das problem mit dem png format das es diesen grauen Hintergrund hatwürde aber gerne einen transparenten hintergrund haben. Komme aber nicht so ganz mit diesen ganzen codes klar wo die hinkommen und alles. Könnte mir da mal einer Bitte helfen ??

grüße
Marcus

 

[Schomo]

Der Trick ist folgender: Firefox und Safari, Camino und Opera können transparente png ohne Probleme rendern. Der Explorer unter Win hat ein Problem damit deswegen gibt es eine Browserweiche die ein Modul im Explorer anspricht, dass die Transparenz trotzdem darstellt:

<!--[if IE 6]>
<style type="text/css" media="screen">
.pngweg { 
     filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='pics/pngs/presse.png');
		height: 1px;
		width: 1px;
   }

.pngweg img {
	visibility: hidden;
	display: none;
	height: 0;
	width: 0;
  }

</style>
<![endif]-->

Der Rest ist ein Cascading Stylesheet (CSS) das das png definiert. Also im headbereich definierst du das png:

<style type="text/css" media="screen"><!--
#Ebene1 { position: absolute; top: 34px; left: 16px; width: 100px; height: 100px; visibility: visible; display: block }
--></style>
	</head>
<style type="text/css" media="screen">
body {
	background: #f90;
	}
</style>

im body bereich muss dass png natürlich auch drin sein:

<div id="Ebene1" class="pngweg">
<img src="pics/pngs/presse.png" width="110" height="110"></div>

Hoffe das hilft.

Gruß Schomo

 

[mrelan]

Hi, bin gerade über diesen thread gestolpert weil ich das selbe problem habe. Danke für die gute Anleitung, aber ich musste es noch etwas abändern, oder habe ich es nur nicht verstanden??? So wie bei dir beschrieben hat es bei mir nicht geklappt.
Soweit bin ich einverstanden:

<!--[if IE 6]>
<style type="text/css" media="screen">
.pngweg { 
     filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='pics/pngs/presse.png');
		height: 1px;
		width: 1px;
   }

.pngweg img {
	visibility: hidden;
	display: none;
	height: 0;
	width: 0;
  }

</style>
<![endif]-->

der folgende Teil muss aber vor das endif, also nach </style>, und nicht nochmal auskommentiert werden, und da ist ein </head> zu viel:

<style type="text/css" media="screen">
#Ebene1 { position: absolute; top: 34px; left: 16px; width: 100px; height: 100px; visibility: visible; display: block }
</style>

und an der stelle wo das png aufgerufen wird, muss der img-tag noch w3c-konform geschlossen und mit Alternativtext versehen werden (war zumindest bei mir ein problem)

<div id="Ebene1" class="pngweg">
<img src="pics/pngs/presse.png" alt="Presse" /></div>

Das wärs von meiner Seite.
Oder zusammengefasst: einmal vor </head>

<!--[if IE 6]>
<style type="text/css" media="screen">
.pngweg { 
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='Presse.png');
	height: 1px;
	width: 1px;
}
.pngweg img {
	visibility: hidden;
	display: none;
	height: 0;
	width: 0;
}
</style>
<style type="text/css" media="screen">
#Ebene1 { position: absolute; top: 15px; left: 650px; width: 100px; height: 100px; visibility: visible; display: block }
</style>
<![endif]-->

und beim bild dann

<div id="Ebene1" class="pngweg">
	    <img src="presse.png" alt="Presse" />
	  </div>

Der Witz ist, wenn ich das richtig verstanden habe, daß alle Browser außer IE den Teil zwischen <!--[if IE 6]> und <![endif]--> sowie das div-tag (das für sie nicht definiert ist, weil sie "Ebene1" nicht gelesen haben) ignorieren.
Stimmt das so?
Das Ergebnis stimmt auf jeden Fall: http://www.fact-musicals.de/neu (es geht um das Logo oben rechts)

 

[ma.buso]

Für alle Interessierten noch ein kleines Tutorial, wenn das transparente PNG Hintergrundbild sein soll:

<style type="text/css" media="screen">
h2 {height: 20px; background-image:url(images/70prozent.png); width: 100%; font-size:13px; margin: 5px 0 0 0;}
</style>

<!--[if gte IE 5.5000]> 
<style type="text/css">
h2 {background: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/70prozent.png',sizingMethod='scale');}
</style>
<![endif]-->

Zur Erklärung: Die Formatierungen aus dem regulären Stylesheet werden übernommen. Das Hintergrundbild wird mittels background: none; rausgeschmissen und dann durch den AlphaImageLoader ersetzt.