IE6兼容透明背景图片及解决方案

首先给大家展示效果图:

JS代码: 

<!--[if IE 6]>
<script src="~/Scripts/UI/DD_belatedPNG.js"></script>
<script>
$(function () {

//1、通过公共类

DD_belatedPNG.fix(".pngFix,.pngFix:hover");

//2、直接用选择器:类名,ID,标签

DD_belatedPNG.fix(".imgpng,img");
});
</script>
<![endif]-->

html代码:

<div class="contain">
<h1>DD_belatedPNG实现IE6下的透明背景</h1>
<div class="con">
<h2>1、通过公共类pngFix</h2>
<p>
window.onload = function () {
DD_belatedPNG.fix(".pngFix,.pngFix:hover");
}
</p>
<img src="../../Content/IMG/IE6.png" alt="" class="pngFix" />
<div class="imgpng pngFix"></div>
</div>
<div class="con">
<h2>2、直接用选择器:类名,ID,标签实现</h2>
<p>
DD_belatedPNG.fix(".imgpng,img");
</p>
<img src="../../Content/IMG/IE6.png" alt="" />
<div class="imgpng"></div>
</div>
</div>

css代码:

<style>
.contain { width: 1000px; height: 300px; margin: 0 auto; background: #fff; }
.contain .con { width: 400px; float: left; }
.contain h1 { font-size: 18px; color: #333; margin-bottom: 10px; }
.contain h2 { font-size: 16px; color: #333; }
.imgpng { width: 200px; height: 150px; background: url(/Content/IMG/Ie6.png); }
</style>

ie6中的透明图片不是透明显示的解决方案

一些图片存在着浏览器的兼容性,本身是透明的图片在ie6中却是不透明,比如:

在ie6中的效果

正常显示的效果

针对以上情况只需要在代码中最后加上下面这一段代码就可以解决了

<!--[if IE 6]>
<script type="text/javascript">
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-3, 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-1
}
}
}
correctPNG();
</script>
<![endif]-->

IE6PNG透明解决方案

一、使用滤镜 代码:

 #pics
 {
  background:url(../images/Logo.png)no-repeat;
  /*以下为IE6设置PNG透明代码*/
  _background:none;
  _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/Logo.png");
 }

提示:如果需要使其支持链接的hover,那么需要在CSS中定义:cursor:pointer;使其呈现手型,否则将为默认的鼠标状态。

优点

1、绿色无插件;

2、效率高,速度快;

3、网速慢的时候,不会出现先灰底再透明的情况,支持远程图片;

4、支持Hover等伪类,但是得使用两张图片,网速慢的情况下,会导致第二张图片暂时无法显示,因为还没有完全载入;

缺点:

1、不支持平铺,虽然filter有sizingMethod="scale", 拉伸缩放模式,但是图片会变形,如果单纯的颜色或简单的渐变色还能横向平铺;

2、不支持Img标签;

3、不支持CSS Sprite;

使用情况:

1、当没有img引入png时可考虑;

2、当没有CSS Sprite需求时可考虑;

3、当没有平铺需求时候可考虑;

二、利用JS解决html中的img(插入在网页中的png图像)png背景灰问题

页面中插入一段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-3, 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-1;
}
}
}
window.attachEvent("onload", correctPNG);
</script>
<![endif]--> ​

三、DD_belatedPNG.js文件

1、引入js文件,同样由于此js只有使用IE6时才有用,所以为了让我们的页面更加高效的执行,我们可以将上方代码修改如下,只有IE6的时候才调用执行此JavaScript:

<!--[ifIE 6]><scripttype="text/javascript"src="js/DD_belatedPNG.js"></script><![endif]-->

2、调用函数,设置参数如下:

代码如下:

DD_belatedPNG.fix("#pngImg,#pics,#picsRepeat");

其中传入的参数为所使用png图片的标签的ID、类样式和标签名称,同样也可以按照下方这样来写

代码如下:

DD_belatedPNG.fix("#contentimg");

此方法则表示#content下的所有img标签透明

如果为链接和链接的hover设置透明,那么您按照下方这么来写,在部分版本里面可以不用加入:hover直接写选择器即可,但是为了保险,建议咱们还是加上:hover:

代码如下:

DD_belatedPNG.fix("#links,#link:hover");

写到这里并且您使用过jQuery或者CSSQuery类库,那么您一定熟悉上面的这种选择方法,总之就是,在CSS中您是如何选择的元素,那么在这个js函数(方法)中传入什么,只不过多个选择的时候,使用逗号隔开即可。

小技巧:如果页面中存在很多png,DD_belatedPNG.fix();函数的参数岂不是很长?我们可以使用这种写法:

代码如下:

DD_belatedPNG.fix(".pngFix,.pngFix:hover");

如果使用上述的写法,我们的html中只需要在相对应的标签上加入class="pngFix"就行了,如果有多个类样式,按照平时的多个类样式的写法即可class="abc cbc pngFix",

使用此方法的时候,我们每次都要加载两个js文件或者写两个<script>标签才行,这样不太好,http请求会增多,那么我们可以打开DD_belatedPNG.js文件,在尾部加入如下代码

即可:

 window.onload= function()
 {
  DD_belatedPNG.fix(".pngFix,.pngFix:hover");
 }

这样我们只需要引入此JS,在需要透明的标签上加入class="pngFix"即可,简单 · 方便 · 快捷!

优点:

1、CSS代码无需任何修改,按照平时的思路来写即可;

2、无需配置;

3、没有多余的gif图片;

4、支持img;

5、支持平铺;

6、支持CSS Sprite;

7、支持Hover等伪类;

缺点:

1、额外加入了js文件(6.39k)和http请求,可以忽略不计;

2、当文件载入之前,会先暂时呈现灰底;

3、js文件过多的时候,可能会报错,导致js无法正常运行(这种情况极少出现,可以忽略不计);

以上就是本文讲述IE6兼容透明背景图片及解决方案的全部内容,希望对大家有所帮助。

(0)

相关推荐

  • 解决IE6的PNG透明JS插件使用介绍

    IE6的PNG透明是个老问题了,最近有朋友问我有没有最好的解决这个问题的插件.虽然知道且在用DD_belatedPNG这个插件,今天抽空把这个发上来. 虽然之前在博客里发过一款jquery的png插件,但是不支持背景平铺. DD_belatedPNG使用了微软的VML语言对PNG图片进行重新绘制,以达到半透明的效果,并且能支持background-position和background-repeat属性,支持伪类.是一款不错的值得推荐的插件,用法也比较简单. 使用方法: 复制代码 代码如下: <

  • png在IE6 下无法透明的解决方法汇总

    FF和IE7已经直接支持透明的png图了,下面这个主要是解决IE6下透明PNG图片有灰底的 复制代码 代码如下: style="FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/fl.png')" 语法: filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSi

  • JS解决ie6下png透明的方法实例

    复制代码 代码如下: <!DOCTYPE html><html lang="en"><head><title>解决ie6下png透明方法之JS法-</title><style type="text/css"> .a{background: #FFFF99 ;  background-image: url(bg.jpg); height:800px;padding: 50px;  } .b{ fl

  • DD_belatedPNG,IE6下PNG透明解决方案(国外)

    我们知道IE6是不支持透明的PNG的,这无疑限制了网页设计的发挥空间. 然而整个互联网上解决这个IE6的透明PNG的方案也是多不胜数,从使用IE特有的滤镜或是e­xpression,再到javascript+透明GIF替代.但是这些方法都有一个缺点,就是不支持CSS中backgrond-position与background-repeat. 而我今天介绍DD_belatedPNG,只需要一个理由,就是它支持backgrond-position与background-repeat.这是其他js插件

  • js png图片(有含有透明)在IE6中为什么不透明了

    复制代码 代码如下: function correctPNG() // correctly handle PNG transparency in Win IE 5.5 & 6. { var arVersion = navigator.appVersion.split("MSIE") var version = parseFloat(arVersion[1]) if ((version >= 5.5) && (document.body.filters))

  • ie6下png图片背景不透明的解决办法使用js实现

    我们时常在使用png图片的时候,在ie6下发生背景不透明的问题,下面给大家介绍下一个js解决的方式. 首先我们要用到一个js,代码如下: 复制代码 代码如下: /** * DD_belatedPNG: Adds IE6 support: PNG images for CSS background-image and HTML <IMG/>. * Author: Drew Diller * Email: drew.diller@gmail.com * URL: http://www.diller

  • IE6兼容透明背景图片及解决方案

    首先给大家展示效果图: JS代码:  <!--[if IE 6]> <script src="~/Scripts/UI/DD_belatedPNG.js"></script> <script> $(function () { //1.通过公共类 DD_belatedPNG.fix(".pngFix,.pngFix:hover"); //2.直接用选择器:类名,ID,标签 DD_belatedPNG.fix("

  • C++ 设置透明背景图片

    背景: 有两个图片,一个是目标背景图片, 一个是带有自身背景色彩的彩色图片 先将这彩色图片绘制到目标背景图片中, 这一步通过BITBLT就可实现.   但实现后的效果是: 目标图片上,绘制上去的彩色图片带有其本身的背景. 问题就来了, 我们想将彩色图片本身的背景去掉,应该如何解决? 解决方法: 使用API函数:TransparentBlt   此函数将原DC中的图片绘制到目标DC中,并同时设置原图形在目标图形上的透明色. BOOL TransparentBlt( HDC hdcDest, //

  • IE6背景图片不缓存问题解决方案及图片使用策略多个方法小结

    解决方法一:IE6 Hack脚本 复制代码 代码如下: <script> if(navigator.appName == "Microsoft Internet Explorer"){ var b_version=navigator.appVersion; var version=b_version.split(";"); var trim_Version=version[1].replace(/[ ]/g,""); if(trim_

  • 利用jQuery和CSS将背景图片拉伸

    现在WEB页面设计比较流行使用大背景图,那么您知道如何使用一张大背景图进行拉伸效果呢?也就是说使用一张固定尺寸的背景图片,让它在页面中随着浏览器尺寸进行拉伸,就像我们的电脑桌面壁纸效果.本文将带您一起使用jQuery和CSS实现背景图片拉伸效果. 将背景图片拉伸,而不是平铺,注意平铺效果我们可以使用CSS的background-repeat来实行背景图片的平铺效果,本文讨论的是背景图片的拉伸效果.这种效果在一些前卫的页面设计中已经广泛应用,尤其在一些独立页面,像登录页面使用拉伸的背景图片效果比较

  • IOS实现自定义透明背景的tabbar

    话不多说,直接看示例代码 ``` // UIImageView *imageView = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0, kScreenW, tabBarHeight + 5)]; // [imageView setImage:[self createImageWithColor:[UIColor clearColor]]]; // [imageView setContentMode:UIViewContentModeScal

  • iOS 解决按钮背景图片拉伸问题(推荐)

    问题如图: 设置按钮的背景图片被拉伸 解决方案 - (void)awakeFromNib { [super awakeFromNib]; //让背景图片不要拉伸 UIImage *image = _loginRegisterBtn.currentBackgroundImage; image = [image stretchableImageWithLeftCapWidth:image.size.width / 2 topCapHeight:image.size.height / 2]; [_lo

  • android 自定义ScrollView实现背景图片伸缩的实现代码及思路

       用过多米音乐的都市知道, 这个UI可以上下滑动,作用嘛---无聊中可以划划解解闷,这被锤子公司老罗称谓为"情怀",其实叫"情味"更合适.嘿嘿.如今挪动互联网开展这么迅速,市场上已不再是那早期随便敲个APP放上架就能具有几十万用户的阶段了.近来苹果公司,为了怕android下载量赶超苹果商店,大势宣称:(第 500 亿个下载应用的用户就能够获得 10,000 美元的 iTunes 礼品卡,除此之外,紧随第 500 亿以后的前 50 名用户也可以获得 500 美元

  • 解决在vue项目中,发版之后,背景图片报错,路径不对的问题

    解决方法: 在utils.js里边的 加上publicPath:'../../', 在引入图片或者背景图的时候,使用方法: 以上这篇解决在vue项目中,发版之后,背景图片报错,路径不对的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 您可能感兴趣的文章: 关于Vue背景图打包之后访问路径错误问题的解决 vue-cli中打包图片路径错误的解决方法 关于vue.js发布后路径引用的问题解决 vue cli使用绝对路径引用图片问题的解决 详解vue-cil和webp

  • 使用Vue-cli 中为单独页面设置背景图片铺满全屏

    啥也不说了,大家还是直接看代码吧~ <template> <div id="logo"> </div> </template> <script> import meadiaurl from '../../api/mediaurl' export default { name: "logo" </script> <style scoped> #logo{ background: url

  • python利用蒙版抠图(使用PIL.Image和cv2)输出透明背景图

    因为最近在做深度学习抠图,正好要用到蒙版进行抠图,所以我将抠图代码进行了封装注释,可以直接使用.可能走了弯路,若有高见请一定提出! 主要代码 import cv2 from PIL import Image import numpy as np class UnsupportedFormat(Exception): def __init__(self, input_type): self.t = input_type def __str__(self): return "不支持'{}'模式的转换

随机推荐