实现png图片和png背景透明（支持多浏览器）的方法

虽然有让IE6支持PNG透明背景的JS程序，都是不是很方便，还是用CSS来实现的好。使用到的就是：IE5.5+的AlphaImageLoader滤镜。
1.png背景透明
解决办法：


代码如下:

#div1 {
height: 600px;
width: 260px;
padding: 20px;
background-repeat: repeat;
}
html>body #div1 {
background-repeat: repeat;background-image: url(bj1.png);
}
* #div1 {filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="bj1.png")
}

附加：IE才识别的通配符（*），来定义IE浏览器中的滤镜
Firefox、Opera等完全支持PNG透明图片的浏览器也支持子选择器（>）
语法：
filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL )
属性：
enabled : 可选项。布尔值(Boolean)。设置或检索滤镜是否激活。true | false
　　　　　　true : 默认值。滤镜激活。
　　　　　　false : 滤镜被禁止。
sizingMethod : 可选项。字符串(String)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。 crop : 剪切图片以适应对象尺寸。
　　　　　　　　image : 默认值。增大或减小对象的尺寸边界以适应图片的尺寸。
　　　　　　　　scale : 缩放图片以适应对象的尺寸边界。
　　　　　　　　src : 必选项。字符串(String)。使用绝对或相对 url 地址指定背景图像。假如忽略此参数，滤镜将不会作用。
2.png图片透明
如果在网页中直接插入png图片想使其透明只需加入以下js代码，整个页面内的所有直接插入的png图片都可以实现透明：


代码如下:

<script language="JavaScript">
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))
{
for(var j=0; j<document.images.length; j++)
{
var img = document.images[j]
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
j = j-1
}
}
}
}
window.attachEvent("onload", correctPNG);
</script>

赞 (0)

相关推荐

  • php缩放gif和png图透明背景变成黑色的解决方法

    工作中需要缩放一些gif图然后在去Imagecopymerge,可是发现使用了imagecreatetruecolor和imagecopyresampled后发现背景图不对,本来透明的背景图变成了黑色,后来发现做一些修改才可以: $img = imagecreatetruecolor(200, 200); //2.上色 $color=imagecolorallocate($img,255,255,255); //3.设置透明 imagecolortransparent($img,$color);

  • jquery png 透明解决方案(推荐)

    原型:http://jquery.andreaseberhard.de/pngFix/index.html 下载:http://jquery.andreaseberhard.de/download/pngFix.zip 很方便使用:) 复制代码 代码如下: <script type="text/javascript" src="jquery-latest.pack.js"></script> <script type="tex

  • 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

  • PNGHandler-借助JS让PNG图在IE下实现透明（包括背景图）

    PNG.JS代码: // PNGHandler: Object-Oriented Javascript-based PNG wrapper // -------------------------------------------------------- // Version 1.1.20031218 // Code by Scott Schiller - www.schillmania.com // ---------------------------------------------

  • 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插件

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

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

  • IE8下jQuery改变png图片透明度时出现的黑边

    IE8下jQuery改变png图片透明度时出现的黑边

    png24格式的图片在用jQuery添加显示隐藏动画时发现,图片的半透明区域出现黑边? 在网上搜了搜主要有以下几种办法: 1.把图片保存成PNG-8格式. 2.把背景色一起切入并保存为JPG格式. 以上两种方法我试了试,好像效果并不好png8格式仍就会有黑边. 解决方法: 1.不要直接改变图片的透明度,而是给图片套个容器,去修改这个容器的透明度 2.给这个容器加个颜色相近的背景颜色(非常重要,解决bug的关键就在这一步,) 一般情况下,到此bug就解决了,如果还是有问题,请看下面: 3.给容器加

  • Java操作透明图片并保持背景透明的实现

    目录 Java操作透明图片并保持背景透明 Java图片背景透明及透明度处理 Java操作透明图片并保持背景透明 最近的一个需求,需要对背景为透明的图片加汉字,加完后会出现背景变黑的情况,附上解决方案 public static void pressText2(String sourceImg,String targetImg) { try { File file = new File(sourceImg); File targetfile = new File(targetImg); Image

  • 实现png图片和png背景透明（支持多浏览器）的方法

    虽然有让IE6支持PNG透明背景的JS程序,都是不是很方便,还是用CSS来实现的好.使用到的就是:IE5.5+的AlphaImageLoader滤镜. 1.png背景透明 解决办法: 复制代码 代码如下: #div1 { height: 600px; width: 260px; padding: 20px; background-repeat: repeat; } html>body #div1 { background-repeat: repeat;background-image: url(

  • PHP添加PNG图片背景透明水印操作类定义与用法示例

    本文实例讲述了PHP添加PNG图片背景透明水印操作类定义与用法.分享给大家供大家参考,具体如下: 图片相关操作类 class ImageTool { private $imagePath;//图片路径 private $outputDir;//输出文件夹 public $memoryImg;//内存图像 public $path; public function __construct($imagePath, $outputDir = null) { $this->imagePath = $im

  • Android编程实现设置按钮背景透明与半透明及图片背景透明的方法

    本文实例讲述了Android编程实现设置按钮背景透明与半透明及图片背景透明的方法.分享给大家供大家参考,具体如下: Button或者ImageButton的背景设为透明或者半透明: 半透明 复制代码 代码如下: <Button android:background="#e0000000" ... /> 透明 复制代码 代码如下: <Button android:background="#00000000" ... /> 颜色和不透明度 (al

  • ie7+背景透明文字不透明超级简单的实现方法

    ie7+背景透明文字不透明超级简单的实现方法

    如果你现在还在为背景透明文字不透明而发愁的话,建议你来看看.当然IE6我已经放弃了,所以不要说不用PNG8的图片这样在IE6下没有效果,当然你也可以用滤镜.本人不建议使用滤镜.因为这样可能会出现其它问题!(如无法点击等等问题)做前端最怕的就是BUG,特别是IE6.滚蛋IE6!本文的核心就是利用PNG32透明图片来做背景然后平铺背景就行了.这样就不会存在背景透明文字也透明了.这样做起来超级简单你们说呢!图片只需要调整透明度即可.在PSD中把图片设置为20%的透明度保存为png就行了.(切忌:不要设

  • Python matplotlib生成图片背景透明的示例代码

    使用matplotlib生成图片,想要背景透明,而且图例部分也显示透明效果,找到了大概的设置方法,特此记录. # coding=utf-8 # matplotlib背景透明示例图 # python 3.5 import numpy as np import matplotlib.pyplot as plt from pylab import mpl import scipy.stats as stats # 设置中文字体 mpl.rcParams['font.sans-serif'] = ['S

  • iframe背景透明的设置方法

    IE5.5开始支持浮动框架的内容透明.如果想要为浮动框架定义透明内容,则必须满足下列条件. 1.与 iframe 元素一起使用的 allowTransparency 标签属性必须设置为 true. 2.在 iframe 内容源文档,background-color 或 body 元素的 bgColor 标签属性必须设置为 transparent 复制代码 代码如下: <iframe src="./ads_top_tian.html" allowtransparency="

  • iOS实现底部弹出PopupWindow效果 iOS改变背景透明效果

    iOS实现底部弹出PopupWindow效果 iOS改变背景透明效果

    底部弹出PopupWindow,背景变为半透明效果,采用两种方式实现 先来看看运行效果图 [方式一]实现从底部弹出PopupWindow 原理:定义一个高度为wrap_content的PopupWindow布局文件,根据屏幕底部的位置显示在Bottom 1.首先定义一个高度为wrap_content的PopupWindow布局文件 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:

  • WinFrom中label背景透明的实现方法

    本文实例讲述了WinFrom中label背景透明的实现方法,在应用程序开发中有着不错的实用价值.分享给大家供大家参考.具体实现方法如下: 使用: lblPstart.BackColor=Color.Transparent; 就可以让lable控件的背景色透明,可以看到摆放lable容器的背景色,但这个背景色不一定是窗体的背景色. 比如: From1.Controls.Add(lable1); lable1.BackColor=Color.Transparent; 这样,lable1就是透明的  

  • Android实现图片自动轮播并且支持手势左右无限滑动

    废话不多说了,先给大家上左右无限滑动的代码了. 1.左右无限滑动 public class MainActivity extends AppCompatActivity { private static ViewPager viewPager; private RadioGroup group; //图片资源,实际项目需要从网络获取 private int[] imageIds = {R.drawable.ym1, R.drawable.ym2, R.drawable.ym3, R.drawab

随机推荐