style.css
img {
behavior:url("pngbehavior.htc");
}
pngbehavior.htc:
<public:component>
<public:attach event="onpropertychange" onevent="propertyChanged()" />
<public:attach event="onbeforeprint" for="window" onevent="beforePrint()" />
<public:attach event="onafterprint" for="window" onevent="afterPrint()" />
<script>
/*
* PNG Behavior
*
* This script was created by Erik Arvidsson (erik(at)eae.net)
* for WebFX (http://webfx.eae.net)
* Copyright 2002
*
* For usage see license at http://webfx.eae.net/license.html
*
* Version: 1.01a
* Created: 2001-??-?? First working version
* Updated: 2002-03-28 Fixed issue when starting with a non png image and
* switching between non png images
* 2003-01-06 Fixed RegExp to correctly work with IE 5.0x
* 2004-04-25 Fixed PNG image printing, eliminated need for external
* GIF file, fixed intermittent uninitialised variable
* error [by AG, <http://www.scss.com.au/family/andrew/> ]
* 2004-09-30 Reverted inline javascript image to transparent GIF. The
* new XP SP2 'security' measures prevented the JS image
* from working. [by AG]
* 2004-10-22 Rewrote fixImage() to try and work around some reported
* problems with PNGs vanishing! [by AG]
*
*/
var IS_PNG = /.png$/i; /* <-- NOTE: remove the "\-trans" to process *all* PNGs */
var supported = /MSIE (5\.5)|[6789]/.test(navigator.userAgent) && navigator.platform == 'Win32';
var realSrc;
var blankSrc = 'images/blank.gif';
if (supported) fixImage();
function propertyChanged() {
if (supported && event.propertyName == 'src' && element.src != blankSrc) {
fixImage();
}
}
function fixImage() {
if (realSrc && element.src == realSrc) {
// this is an attempt to set the image to itself!
// pointless - leave the filter as-is, restore the blank image
element.src = blankSrc;
} else {
// set the image to something different
if (IS_PNG.test(element.src)) {
// fixable PNG
realSrc = element.src;
element.src = blankSrc;
element.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + realSrc + "',sizingMethod='scale')";
} else {
// ordinary image - make sure the fix is removed
if (realSrc) {
realSrc = null;
element.runtimeStyle.filter = '';
}
}
}
}
function beforePrint() {
if (realSrc) {
supported = false;
element.src = realSrc;
element.runtimeStyle.filter = '';
supported = true;
}
}
function afterPrint() {
if (realSrc) {
var rs = realSrc;
realSrc = null;
element.src = rs;
}
}
</script>
</public:component>
注意：该种方法须指定 width, height
IE 7+就不用这些麻烦了
