michaelsinterface.de

png.opacity

  • In diesem CSS-Experiment habe ich mich der Thematik "Alpha-transparente PNG-Grafik im Web" gewidmet, und mich mit den vielen möglichen Workarounds auseinandergesetzt, die eine korrekte Darstellung der semitransparenten PNG-Grafik im IE5.5 & IE6 erzielen.

    Letztendlich ist in diesem Demo der "AlphaImageLoader"-Filter zum Zuge gekommen, da er mich von seinem schlanken Code überzeugt hat.

Box mit semitransparentem PNG-Hintergrundbild

  • Grafikdateien:
  • -circle.png-
  • -opacity.png-
Quellcode  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>::: png.opacity :::</title>

<style type="text/css">
<!--
div.box {
width:400px;
height:200px;
text-align:center;
border:2px solid #143666;
font-weight:bold;
color:#fff;
}
div.box {
background-image: url(img/opacity.png);
}
-->
</style>
<!--[if lt IE 7]>
<style type="text/css">
div.box {
background-image:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale, src='img/opacity.png');
}
</style>
<![endif]-->

</head>
<body>

<div class="box">
 <p>Box mit semitransparentem PNG-Hintergrundbild</p>
</div>

</body>
</html>