首页 > 代码库 > 【css】jquery.pngFix.js解决透明问题
【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=http://www.mamicode.com/‘‘ + 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=http://www.mamicode.com/‘" + 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=http://www.mamicode.com/‘‘ + bgIMG + ‘/‘, sizingMethod=/‘scale/‘);‘; jQuery(this).attr(‘src‘, settings.blankgif) }); } return jQuery;};})(jQuery);
<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=http://www.mamicode.com/‘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="http://www.mamicode.com/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=http://www.mamicode.com/‘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>
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。