前端技术

当前位置:首页 > 前端技术 >

解决png图片在ie中不透明问题

时间:2015-07-09        阅读:次        QQ群:182913345

        PNG(Portable Network Graphics)是W3C推荐的网页图片通用格式,但是Microsoft的IE6以下(IE7已经支持)没有把PNG的Alpha 通道打开,造成透明PNG图片的效果出不来。在Firefox、Opera下显示正常的透明PNG图片,在IE下浏览时就会带有灰色背景色,不能正常显示透明的PNG图片。

        IE不支持png图片的解决办法:在head里引入png.js文件,并加入以下代码。

<!--[IF IE 6]>
<script type="text/javascript" src="/js/png.js"></script>
<script type="text/javascript">
	DD_belatedPNG.fix("*");
	document.execCommand("BackgroundImageCache", false, true);
</script>
<![ENDIF]-->

        png.js文件内容如下:

var DD_belatedPNG = {
    ns: "DD_belatedPNG",
    imgSize: {},
    delay: 10,
    nodesFixed: 0,
    createVmlNameSpace: function() {
        if (document.namespaces && !document.namespaces[this.ns]) {
            document.namespaces.add(this.ns, "urn:schemas-microsoft-com:vml")
        }
    },
    createVmlStyleSheet: function() {
        var b, a;
        b = document.createElement("style");
        b.setAttribute("media", "screen");
        document.documentElement.firstChild.insertBefore(b, document.documentElement.firstChild.firstChild);
        if (b.styleSheet) {
            b = b.styleSheet;
            b.addRule(this.ns + "\\:*", "{behavior:url(#default#VML)}");
            b.addRule(this.ns + "\\:shape", "position:absolute;");
            b.addRule("img." + this.ns + "_sizeFinder", "behavior:none; border:none; position:absolute; z-index:-1; top:-10000px; visibility:hidden;");
            this.screenStyleSheet = b;
            a = document.createElement("style");
            a.setAttribute("media", "print");
            document.documentElement.firstChild.insertBefore(a, document.documentElement.firstChild.firstChild);
            a = a.styleSheet;
            a.addRule(this.ns + "\\:*", "{display: none !important;}");
            a.addRule("img." + this.ns + "_sizeFinder", "{display: none !important;}")
        }
    },
    readPropertyChange: function() {
        var b, c, a;
        b = event.srcElement;
        if (!b.vmlInitiated) {
            return
        }
        if (event.propertyName.search("background") != -1 || event.propertyName.search("border") != -1) {
            DD_belatedPNG.applyVML(b)
        }
        if (event.propertyName == "style.display") {
            c = (b.currentStyle.display == "none") ? "none": "block";
            for (a in b.vml) {
                if (b.vml.hasOwnProperty(a)) {
                    b.vml[a].shape.style.display = c
                }
            }
        }
        if (event.propertyName.search("filter") != -1) {
            DD_belatedPNG.vmlOpacity(b)
        }
    },
    vmlOpacity: function(b) {
        if (b.currentStyle.filter.search("lpha") != -1) {
            var a = b.currentStyle.filter;
            a = parseInt(a.substring(a.lastIndexOf("=") + 1, a.lastIndexOf(")")), 10) / 100;
            b.vml.color.shape.style.filter = b.currentStyle.filter;
            b.vml.image.fill.opacity = a
        }
    },
    handlePseudoHover: function(a) {
        setTimeout(function() {
            DD_belatedPNG.applyVML(a)
        },
        1)
    },
    fix: function(a) {
        if (this.screenStyleSheet) {
            var c, b;
            c = a.split(",");
            for (b = 0; b < c.length; b++) {
                this.screenStyleSheet.addRule(c[b], "behavior:expression(DD_belatedPNG.fixPng(this))")
            }
        }
    },
    applyVML: function(a) {
        a.runtimeStyle.cssText = "";
        this.vmlFill(a);
        this.vmlOffsets(a);
        this.vmlOpacity(a);
        if (a.isImg) {
            this.copyImageBorders(a)
        }
    },
    attachHandlers: function(i) {
        var d, c, g, e, b, f;
        d = this;
        c = {
            resize: "vmlOffsets",
            move: "vmlOffsets"
        };
        if (i.nodeName == "A") {
            e = {
                mouseleave: "handlePseudoHover",
                mouseenter: "handlePseudoHover",
                focus: "handlePseudoHover",
                blur: "handlePseudoHover"
            };
            for (b in e) {
                if (e.hasOwnProperty(b)) {
                    c[b] = e[b]
                }
            }
        }
        for (f in c) {
            if (c.hasOwnProperty(f)) {
                g = function() {
                    d[c[f]](i)
                };
                i.attachEvent("on" + f, g)
            }
        }
        i.attachEvent("onpropertychange", this.readPropertyChange)
    },
    giveLayout: function(a) {
        a.style.zoom = 1;
        if (a.currentStyle.position == "static") {
            a.style.position = "relative"
        }
    },
    copyImageBorders: function(b) {
        var c, a;
        c = {
            borderStyle: true,
            borderWidth: true,
            borderColor: true
        };
        for (a in c) {
            if (c.hasOwnProperty(a)) {
                b.vml.color.shape.style[a] = b.currentStyle[a]
            }
        }
    },
    vmlFill: function(e) {
        if (!e.currentStyle) {
            return
        } else {
            var d, f, g, b, a, c;
            d = e.currentStyle
        }
        for (b in e.vml) {
            if (e.vml.hasOwnProperty(b)) {
                e.vml[b].shape.style.zIndex = d.zIndex
            }
        }
        e.runtimeStyle.backgroundColor = "";
        e.runtimeStyle.backgroundImage = "";
        f = true;
        if (d.backgroundImage != "none" || e.isImg) {
            if (!e.isImg) {
                e.vmlBg = d.backgroundImage;
                e.vmlBg = e.vmlBg.substr(5, e.vmlBg.lastIndexOf('")') - 5)
            } else {
                e.vmlBg = e.src
            }
            g = this;
            if (!g.imgSize[e.vmlBg]) {
                a = document.createElement("img");
                g.imgSize[e.vmlBg] = a;
                a.className = g.ns + "_sizeFinder";
                a.runtimeStyle.cssText = "behavior:none; position:absolute; left:-10000px; top:-10000px; border:none; margin:0; padding:0;";
                c = function() {
                    this.width = this.offsetWidth;
                    this.height = this.offsetHeight;
                    g.vmlOffsets(e)
                };
                a.attachEvent("onload", c);
                a.src = e.vmlBg;
                a.removeAttribute("width");
                a.removeAttribute("height");
                document.body.insertBefore(a, document.body.firstChild)
            }
            e.vml.image.fill.src = e.vmlBg;
            f = false
        }
        e.vml.image.fill.on = !f;
        e.vml.image.fill.color = "none";
        e.vml.color.shape.style.backgroundColor = d.backgroundColor;
        e.runtimeStyle.backgroundImage = "none";
        e.runtimeStyle.backgroundColor = "transparent"
    },
    vmlOffsets: function(d) {
        var h, n, a, e, g, m, f, l, j, i, k;
        h = d.currentStyle;
        n = {
            W: d.clientWidth + 1,
            H: d.clientHeight + 1,
            w: this.imgSize[d.vmlBg].width,
            h: this.imgSize[d.vmlBg].height,
            L: d.offsetLeft,
            T: d.offsetTop,
            bLW: d.clientLeft,
            bTW: d.clientTop
        };
        a = (n.L + n.bLW == 1) ? 1 : 0;
        e = function(b, p, q, c, s, u) {
            b.coordsize = c + "," + s;
            b.coordorigin = u + "," + u;
            b.path = "m0,0l" + c + ",0l" + c + "," + s + "l0," + s + " xe";
            b.style.width = c + "px";
            b.style.height = s + "px";
            b.style.left = p + "px";
            b.style.top = q + "px"
        };
        e(d.vml.color.shape, (n.L + (d.isImg ? 0 : n.bLW)), (n.T + (d.isImg ? 0 : n.bTW)), (n.W - 1), (n.H - 1), 0);
        e(d.vml.image.shape, (n.L + n.bLW), (n.T + n.bTW), (n.W), (n.H), 1);
        g = {
            X: 0,
            Y: 0
        };
        if (d.isImg) {
            g.X = parseInt(h.paddingLeft, 10) + 1;
            g.Y = parseInt(h.paddingTop, 10) + 1
        } else {
            for (j in g) {
                if (g.hasOwnProperty(j)) {
                    this.figurePercentage(g, n, j, h["backgroundPosition" + j])
                }
            }
        }
        d.vml.image.fill.position = (g.X / n.W) + "," + (g.Y / n.H);
        m = h.backgroundRepeat;
        f = {
            T: 1,
            R: n.W + a,
            B: n.H,
            L: 1 + a
        };
        l = {
            X: {
                b1: "L",
                b2: "R",
                d: "W"
            },
            Y: {
                b1: "T",
                b2: "B",
                d: "H"
            }
        };
        if (m != "repeat" || d.isImg) {
            i = {
                T: (g.Y),
                R: (g.X + n.w),
                B: (g.Y + n.h),
                L: (g.X)
            };
            if (m.search("repeat-") != -1) {
                k = m.split("repeat-")[1].toUpperCase();
                i[l[k].b1] = 1;
                i[l[k].b2] = n[l[k].d]
            }
            if (i.B > n.H) {
                i.B = n.H
            }
            d.vml.image.shape.style.clip = "rect(" + i.T + "px " + (i.R + a) + "px " + i.B + "px " + (i.L + a) + "px)"
        } else {
            d.vml.image.shape.style.clip = "rect(" + f.T + "px " + f.R + "px " + f.B + "px " + f.L + "px)"
        }
    },
    figurePercentage: function(d, c, f, a) {
        var b, e;
        e = true;
        b = (f == "X");
        switch (a) {
        case "left":
        case "top":
            d[f] = 0;
            break;
        case "center":
            d[f] = 0.5;
            break;
        case "right":
        case "bottom":
            d[f] = 1;
            break;
        default:
            if (a.search("%") != -1) {
                d[f] = parseInt(a, 10) / 100
            } else {
                e = false
            }
        }
        d[f] = Math.ceil(e ? ((c[b ? "W": "H"] * d[f]) - (c[b ? "w": "h"] * d[f])) : parseInt(a, 10));
        if (d[f] % 2 === 0) {
            d[f]++
        }
        return d[f]
    },
    fixPng: function(c) {
        c.style.behavior = "none";
        var g, b, f, a, d;
        if (c.nodeName == "BODY" || c.nodeName == "TD" || c.nodeName == "TR") {
            return
        }
        c.isImg = false;
        if (c.nodeName == "IMG") {
            if (c.src.toLowerCase().search(/\.png$/) != -1) {
                c.isImg = true;
                c.style.visibility = "hidden"
            } else {
                return
            }
        } else {
            if (c.currentStyle.backgroundImage.toLowerCase().search(".png") == -1) {
                return
            }
        }
        g = DD_belatedPNG;
        c.vml = {
            color: {},
            image: {}
        };
        b = {
            shape: {},
            fill: {}
        };
        for (a in c.vml) {
            if (c.vml.hasOwnProperty(a)) {
                for (d in b) {
                    if (b.hasOwnProperty(d)) {
                        f = g.ns + ":" + d;
                        c.vml[a][d] = document.createElement(f)
                    }
                }
                c.vml[a].shape.stroked = false;
                c.vml[a].shape.appendChild(c.vml[a].fill);
                c.parentNode.insertBefore(c.vml[a].shape, c)
            }
        }
        c.vml.image.shape.fillcolor = "none";
        c.vml.image.fill.type = "tile";
        c.vml.color.fill.on = false;
        g.attachHandlers(c);
        g.giveLayout(c);
        g.giveLayout(c.offsetParent);
        c.vmlInitiated = true;
        g.applyVML(c)
    }
};
try {
    document.execCommand("BackgroundImageCache", false, true)
} catch(r) {}
DD_belatedPNG.createVmlNameSpace();
DD_belatedPNG.createVmlStyleSheet();

上一篇:jQuery 实现全选和取消全选功能

下一篇:marquee 移动标签属性详解

扫一扫,更多精彩内容推送

PHP技术分享

分享PHP技术,前端技术,数据库,SEO优化,服务器,网络安全等知识,是php程序员工作学习的好帮手!

Copyright © 2013-2015.PHP技术分享 www.php520.cn  版权所有  网站地图    PHP学习交流群

免责声明:网站内容收集于互联网,本网站不承担任何由于内容的合法性及健康性所引起的争议和法律责任。

欢迎大家对网站内容侵犯版权等不合法和不健康行为进行监督和举报。 沪ICP备15014499号-2