IE6下PNG情况全透明的7种方式小结

日期:2021-03-12 类型:科技新闻 

关键词:微信小程序页面设计,python小程序,小程序首页模板,如何建立微信小程序,怎么做微信小程序

PNG图象文件格式详细介绍:

PNG是20新世纪90时代中期刚开始开发设计的图象文档储存文件格式,其目地是妄图取代GIF和TIFF文档文件格式,另外提升1些GIF文档文件格式所不具有的特点。流式的 互联网图型文件格式(Portable Network Graphic Format,PNG)名字来源于于非官方的“PNG’s Not GIF”,是1种位图文档(bitmap file)储存文件格式,读成“ping”。PNG用来储存灰度值图象时,灰度值图象的深层可多到16位,储存五颜六色图象时,五颜六色图象的深层可多到48位,而且还可 储存多到16位的α安全通道数据信息。

IE6下PNG情况全透明的显示信息难题

PNG文件格式比起GIF来主要表现颜色更丰富多彩,非常是主要表现渐变色和情况全透明的渐变色要比GIF文件格式优异许多,现阶段,全新的访问器基础上都适用PNG文件格式。可是IE6不适用PNG情况全透明,会显示信息1个灰色的框。

IE6下PNG情况全透明的处理方法
.pngImg { background:url(image.png); _background:url(image.gif);}
留意上文的_号,现阶段IE7,8和Firefox访问器等都不适用此CSS英语的语法,仅有IE6鉴别。因而,别的访问器会启用PNG,而IE6刚启用GIF。

2.滤镜filter处理IE6下情况灰

background:url(a.png) repeat-x 0 0; _background:none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="a.png" ,sizingMethod="crop");
上面的基本原理是别的启用PNG,IE6,则先设情况沒有,随后启用滤镜使之显示信息PNG照片。

缺点:IE6下情况没法平铺,这个难题很比较严重。另外在特性上也是有小难题,网页页面中次数并不是许多的情况下该方法還是可行的。

AlphaImageLoader滤镜会致使该地区的连接和按钮失效,处理的方法是为连接或按钮加上:position: relative;这样条编码,使其相对性波动。AlphaImageLoader没法设定情况的反复,因此对照片的切图精度会有很高的精准度规定。

处理IE下的连接失效能用最终面的方式:

3.运用JS处理html中的img(插进在网页页面中的png图象)png情况灰难题

网页页面中插进1段js便可。基本原理同上,只是将img标识用<span>标识更换掉,而且根据滤镜设定该<span>标识的background。它会将全部插进的PNG都这般解决。

拷贝编码
编码以下:

<!--[if IE 6]>
<script>
function correctPNG()
{
for(var i=0; i<document.images.length; i++)
{
var img = document.images[i];
var imgName = img.src.toUpperCase();
if (imgName.substring(imgName.length⑶, imgName.length) == "PNG")
{
var imgID = (img.id) ? "id='" + img.id + "' " : "";
var imgClass = (img.className) ? "class='" + img.className + "' " : "";
var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' ";
var imgStyle = "display:inline-block;" + img.style.cssText;
if (img.align == "left") imgStyle = "float:left;" + imgStyle;
if (img.align == "right") imgStyle = "float:right;" + imgStyle;
if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle;
var strNewHTML = "<span "+ imgID + imgClass + imgTitle + "style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader" + "(src='" + img.src + "', sizingMethod='scale');\"></span>";
img.outerHTML = strNewHTML;
i = i⑴;
}
}
}
window.attachEvent("onload", correctPNG);
</script>
<![endif]--> ​


4.启用iepngfix.htc处理IE6PNG情况灰及拉伸难题

此方式来自:http://www.twinhelix.com/css/iepngfix/ 此方式根据Winodws服务平台,在Linux下不适用htc,沒有认证过,但有网友发文确认。

下列片断加上至css文档

<div class="pngImg">PNG情况照片</div> <img src="png照片" class="pngImg" alt="">
详尽的运用方式这里就不详细介绍啦。

在迫不得已且身不由已务必应用PNG的状况下,这类方式应当是较为出色的,尽管不可以完善的处理IE6的平铺,可是最少是完成了拉伸,使得许多状况下能够替代平铺来应用。自然高效率的难题任然是存在

5.让“块”全透明的方式

.div { FILTER: alpha(opacity=20); moz-opacity: 0.2; opacity: 0.2;}
检测IE6,IE7,IE8,FF2,FF3均根据。提醒:IE6,IE7需设定1个宽度(100%也行),不然看不见实际效果。

6.DD_belatedPNG,处理IE6不适用PNG绝佳计划方案

全部互联网技术上处理这个IE6的全透明PNG的计划方案也是多不敌数,从应用IE独有的滤镜或是e xpression,再到javascript+全透明GIF取代.可是这些方式都有1个缺陷,便是不适用CSS中backgrond-position与 background-repeat.

而我今日详细介绍DD_belatedPNG,只必须1个理由,便是它适用backgrond-position与background-repeat.这是别的js软件不具有的.另外DD_belatedPNG还适用a:hover特性,和<img>.

看Demo: http://www.ediyang.com/demo/DD_Png/

基本原理
这个js软件应用了微软的VML語言开展绘图,而别的大部分处理PNG难题的js软件用的是AlphaImageLoader滤镜.

应用方式

/Files/aKing/处理IE6全透明PNG.rar
1.在这里免费下载DD_belatedPNG.js文档.
http://dillerdesign.com/experiment/DD_belatedPNG/#download

2.在网页页面中引入,以下:

拷贝编码
编码以下:

<!--[if IE 6]>
<script src="DD_belatedPNG.js" mce_src="DD_belatedPNG.js"></script>
<script type="text/javascript"> /* EXAMPLE */ DD_belatedPNG.fix('.png_bg'); /* 将 .png_bg 改为你运用了全透明PNG的CSS挑选器,比如我事例中的'.trans'*/ </script> <![endif]-->

3.有2种启用涵数,1种是DD_belatedPNG.fix(),如上编码.另外一种是fix(),这中方式必须在涵数内指出css挑选器名.
应用a:hover请注意
5⑵5 升级:假如你也像jutoy同学1样要想用全透明PNG做为a:hover时的情况照片,那末你必须注意你的编码,必须以”a:hover”来做为挑选器. 不然将会会致使没法取得成功.另外我也升级了demo,请必须的升级查询.接着大家看看正确的编码:

拷贝编码
编码以下:

<!--[if IE 6]>
<script type="text/javascript" src="js/DD_belatedPNG.js" ></script>
<script type="text/javascript"> DD_belatedPNG.fix('.trans,.box a:hover'); </script>
<![endif]-->

7.根据 javascript 和 css 滤镜处理 IE 整站 png 情况全透明难题

拷贝编码
编码以下:

<script type="text/javascript" language="javascript">
function enablePngImages()
{ var imgArr = document.getElementsByTagName("IMG");
for(i=0; i<imgArr.length; i++){
if(imgArr[i].src.toLowerCase().lastIndexOf(".png") != ⑴)
{
imgArr[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + imgArr[i].src + "', sizingMethod='auto')";
imgArr[i].src = "spacer.gif";
}
if(imgArr[i].currentStyle.backgroundImage.lastIndexOf(".png") != ⑴)
{
var img = imgArr[i].currentStyle.backgroundImage.substring(5,imgArr[i].currentStyle.backgroundImage.length⑵);
imgArr[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+img+"', sizingMethod='crop')";
imgArr[i].style.backgroundImage = "url(spacer.gif)";
}
}
}
function enableBgPngImages(bgElements)
{
for(i=0; i<bgElements.length; i++)
{
if(bgElements[i].currentStyle.backgroundImage.lastIndexOf(".png") != ⑴)
{ //alert(bgElements[i]);
var img = bgElements[i].currentStyle.backgroundImage.substring(5,bgElements[i].currentStyle.backgroundImage.length⑵);
bgElements[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+img+"', sizingMethod='crop')";
bgElements[i].style.backgroundImage = "url(spacer.gif)";
}
}
}
</script>
<img src="pngpic.png" alt="" border="0" />
<!--[if lt IE 7]>
<script type='text/javascript'>
var bgElements; enablePngImages(); if(bgElements){ enableBgPngImages(bgElements); }
</script>
<![endif]-->

.pngImg {behavior: url(iepngfix.htc);}
下列片断加上至html文档1.IE6应用gif,别的则应用png来处理PNG情况灰