【css】jquery.pngFix.js解决透明问题

/**
 * --------------------------------------------------------------------
 * jQuery-Plugin "pngFix"
 * Version: 1.2, 09.03.2009
 * by Andreas Eberhard, andreas.eberhard@gmail.com
 *                      http://jquery.andreaseberhard.de/
 *
 * Copyright (c) 2007 Andreas Eberhard
 * Licensed under GPL (http://www.opensource.org/licenses/gpl-license.php)
 *
 * Changelog:
 *    09.03.2009 Version 1.2
 *    - Update for jQuery 1.3.x, removed @ from selectors
 *    11.09.2007 Version 1.1
 *    - removed noConflict
 *    - added png-support for input type=image
 *    - 01.08.2007 CSS background-image support extension added by Scott Jehl, scott@filamentgroup.com, http://www.filamentgroup.com
 *    31.05.2007 initial Version 1.0
 * --------------------------------------------------------------------
 * @example $(function(){$(document).pngFix();});
 * @desc Fixes all PNG's in the document on document.ready
 *
 * jQuery(function(){jQuery(document).pngFix();});
 * @desc Fixes all PNG's in the document on document.ready when using noConflict
 *
 * @example $(function(){$('div.examples').pngFix();});
 * @desc Fixes all PNG's within div with class examples
 *
 * @example $(function(){$('div.examples').pngFix( { blankgif:'ext.gif' } );});
 * @desc Fixes all PNG's within div with class examples, provides blank gif for input with png
 * --------------------------------------------------------------------
 */
(function($) {

jQuery.fn.pngFix = function(settings) {

    // Settings
    settings = jQuery.extend({
        blankgif: 'http://img.mymhotel.com/plugins/pngfix/blank.gif'
    }, settings);

    var ie55 = (navigator.appName == "Microsoft Internet Explorer" && parseInt(navigator.appVersion) == 4 && navigator.appVersion.indexOf("MSIE 5.5") != -1);
    var ie6 = (navigator.appName == "Microsoft Internet Explorer" && parseInt(navigator.appVersion) == 4 && navigator.appVersion.indexOf("MSIE 6.0") != -1);

    if (jQuery.browser.msie && (ie55 || ie6)) {

        //fix images with png-source
        jQuery(this).find("img[src$=.png]").each(function() {

            jQuery(this).attr('width',jQuery(this).width());
            jQuery(this).attr('height',jQuery(this).height());

            var prevStyle = '';
            var strNewHTML = '';
            var imgId = (jQuery(this).attr('id')) ? 'id="' + jQuery(this).attr('id') + '" ' : '';
            var imgClass = (jQuery(this).attr('class')) ? 'class="' + jQuery(this).attr('class') + '" ' : '';
            var imgTitle = (jQuery(this).attr('title')) ? 'title="' + jQuery(this).attr('title') + '" ' : '';
            var imgAlt = (jQuery(this).attr('alt')) ? 'alt="' + jQuery(this).attr('alt') + '" ' : '';
            var imgAlign = (jQuery(this).attr('align')) ? 'float:' + jQuery(this).attr('align') + ';' : '';
            var imgHand = (jQuery(this).parent().attr('href')) ? 'cursor:hand;' : '';
            if (this.style.border) {
                prevStyle += 'border:'+this.style.border+';';
                this.style.border = '';
            }
            if (this.style.padding) {
                prevStyle += 'padding:'+this.style.padding+';';
                this.style.padding = '';
            }
            if (this.style.margin) {
                prevStyle += 'margin:'+this.style.margin+';';
                this.style.margin = '';
            }
            var imgStyle = (this.style.cssText);

            strNewHTML += '<span '+imgId+imgClass+imgTitle+imgAlt;
            strNewHTML += 'style="position:relative;white-space:pre-line;display:inline-block;background:transparent;'+imgAlign+imgHand;
            strNewHTML += 'width:' + jQuery(this).width() + 'px;' + 'height:' + jQuery(this).height() + 'px;';
            strNewHTML += 'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader' + '(src=\'' + jQuery(this).attr('src') + '\', sizingMethod=\'scale\');';
            strNewHTML += imgStyle+'"></span>';
            if (prevStyle != ''){
                strNewHTML = '<span style="position:relative;display:inline-block;'+prevStyle+imgHand+'width:' + jQuery(this).width() + 'px;' + 'height:' + jQuery(this).height() + 'px;'+'">' + strNewHTML + '</span>';
            }

            jQuery(this).hide();
            jQuery(this).after(strNewHTML);
            //alert($(body).html());

        });

        // fix css background pngs
        jQuery(this).find("*").each(function(){
            var bgIMG = jQuery(this).css('background-image');
            if(bgIMG.indexOf(".png")!=-1){
                var iebg = bgIMG.split('url("')[1].split('")')[0];
                jQuery(this).css('background-image', 'none');
                jQuery(this).get(0).runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + iebg + "',sizingMethod='scale')";
            }
        });
        
        //fix input with png-source
        jQuery(this).find("input[src$=.png]").each(function() {
            var bgIMG = jQuery(this).attr('src');
            jQuery(this).get(0).runtimeStyle.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader' + '(src=\'' + bgIMG + '\', sizingMethod=\'scale\');';
           jQuery(this).attr('src', settings.blankgif)
        });
    
    }
    
    return jQuery;

};

})(jQuery);

View Code

<span style="position:relative;white-space:pre-line;display:inline-block;background:transparent;cursor:hand;width:378px;height:564px;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='order_icon01.png', sizingMethod='scale');"></span>

原理：img图片隐藏，在img后面添加一个span标签，span的样式为img的样式，background:none;滤镜为图片的地址，position:relative;

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src='jquery.js'></script>

<style type="text/css">
.main{ background-color: red; min-height: 500px; height: auto !important; height: 500px; overflow: hidden;zoom:1;margin-bottom:100px;}
.btn_arw{ display:block;width:170px; height:39px;position:relative;}
.btn{ width:170px; height:39px;background:red;_background-image:none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="order_icon02.png", sizingMethod="scale");}
a.btn_arw:hover{ color:red;}
</style>
</head>

<body>
<div class='main'><a href='http://www.baidu.com1'><img style='display:none;' src='order_icon01.png'><span style="position:relative;white-space:pre-line;display:inline-block;background:transparent;cursor:hand;width:378px;height:564px;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='order_icon01.png', sizingMethod='scale');"></span></a></div>
<div class='btn'><a href='http://www.baidu.com2' class='btn_arw' style='width:170px;height:39px;'>111222222</a></div>
</body>
</html>

 

ie6 滤镜 FILTER:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop, src=“”);

sizingMethod：有三个选项 
crop：剪切图片以适应对象尺寸。 
image：默认值。增大或减小对象的尺寸边界以适应图片的尺寸。 
scale：缩放图片以适应对象的尺寸边界


但滤镜有效的前提是 background为none：background-position无效。。。可以用margin-top:负值

所有如果想要用csssprite来做图片的话。。。，必须用遮罩（overflow：hidden），里面的图片为原图那么大。


 AlphaImageLoader滤镜会导致该区域的链接和按钮无效，一般情况下的解决办法是为链接或按钮添加：position:relative使其 相对浮动。

要注意的是，当加载滤镜的区域的父层有position:absolute绝对定位的时候使用position:relative也不能使链接复原。建议 改用浮动（float）。建议使用浮动办法处理。

 

转载于:https://www.cnblogs.com/positive/p/3884629.html