今天無意間看到 Drew McLellan 在 2007 年寫了這篇 Transparent PNGs in Internet Explorer 6，真的是太晚發現這篇了，之前自己寫到一篇：『[CSS] IE 6, 7, 8 FireFox hack 支援透明背景圖 background or img javascript』，雖然 Google 官方網站宣佈完全不支援 IE6 瀏覽器，打算只支援 Microsoft Internet Explorer 7.0+, Mozilla Firefox 3.0+, Google Chrome 4.0+, Safari 3.0+，可是我們這些 Web Developer 還是需要考慮客戶的瀏覽器阿，因為客戶才是最大的，尤其是在一些學術機構，安裝好 XP，預設就是 IE6，從 Google 分析裡面，IE6 也是網站的客戶大群。
先來介紹 Drew McLellan 寫的一支好用 js 來改善所有 png 透明圖檔，最主要是修正 background-image 跟 img tag 所包含的 png 圖檔
1. 先下載：Download SuperSleight，解壓縮放到 js 資料夾
2. 針對 IE6 瀏覽器寫入 html
<script type="text/javascript" src="supersleight-min.js"></script>
<![endif]-->
來分析 supersleight.js 檔案，看它是如何運作，底下是完整程式碼：
var root = false;
var applyPositioning = true;
// Path to a transparent GIF image
var shim = 'x.gif';
// RegExp to match above GIF image name
var shim_pattern = /x\.gif$/i;
var fnLoadPngs = function() {
if (root) {
root = document.getElementById(root);
}else{
root = document;
}
for (var i = root.all.length - 1, obj = null; (obj = root.all[i]); i--) {
// background pngs
if (obj.currentStyle.backgroundImage.match(/\.png/i) !== null) {
bg_fnFixPng(obj);
}
// image elements
if (obj.tagName=='IMG' && obj.src.match(/\.png$/i) !== null){
el_fnFixPng(obj);
}
// apply position to 'active' elements
if (applyPositioning && (obj.tagName=='A' || obj.tagName=='INPUT') && obj.style.position === ''){
obj.style.position = 'relative';
}
}
};
var bg_fnFixPng = function(obj) {
var mode = 'scale';
var bg = obj.currentStyle.backgroundImage;
var src = bg.substring(5,bg.length-2);
if (obj.currentStyle.backgroundRepeat == 'no-repeat') {
mode = 'crop';
}
obj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizingMethod='" + mode + "')";
obj.style.backgroundImage = 'url('+shim+')';
};
var el_fnFixPng = function(img) {
var src = img.src;
img.style.width = img.width + "px";
img.style.height = img.height + "px";
img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizingMethod='scale')";
img.src = shim;
};
var addLoadEvent = function(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
};
}
};
return {
init: function() {
addLoadEvent(fnLoadPngs);
},
limitTo: function(el) {
root = el;
},
run: function() {
fnLoadPngs();
}
};
}();
// limit to part of the page ... pass an ID to limitTo:
// supersleight.limitTo('header');
supersleight.init();
bg_fnFixPng: 針對背景圖修正
el_fnFixPng: 針對單一 element 修正
fnLoadPngs: js 主要 function，會使用到上述兩個 function
列出 supersleight 特性:
- 針對 inline and background images tag 作處理修正
- 可以針對特定區域進行 PNG 透明修正，加速網站 Performence (預設是針對整個 body 進行轉換)
第二點的意思是說，本來是寫 supersleight.init(); 針對整個 body 作轉換動作，可以改為 supersleight.limitTo(”header”); 假設您知道只有 header element 需要進行 PNG 的轉換，就可以使用此語法來加速網站執行速度。
jQuery Plugin
Supersleight jQuery Plugin for Transparent PNGs in IE6
作者也寫了 jQuery Plugin，造福了 jQuery 使用者，使用方式也相當簡單。
可以針對單一區域進行變換
或者是針對整個 body
因為 plugin 需要 transparent GIF shim image，所以將語法改成：
