使PNG图片在IE浏览器实现透明效果代码
首先看我们的<img>标签代码：<img src="Example.png" border="0" alt="放大镜" />我们将利用IE中特有的特效来满足这个要求，这就是AlphaImageLoader Filter (http://msdn.microsoft.com/library/default.asp?url=/workshop/author/filter/reference/filters/alphaimageloader.asp) 如何做？将下面代码保存为correctPNG.js:
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; margin:6px; 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);
然后在你需要透明的网页中的<head>....</head>区加入：<script type="text/javascript" src="correctPNG.js"></script>
在<body>区加入多个与<img src="Example.png" border="0" alt="放大镜" />类似的PNG图片，试试看？
另一种方法：
<html>
<head>
<title>alpha image</title>
<style type="text/css">
.pngholder{
width:100px;
height:100px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.jb51.net/attachments/200510/03_124401_ie.png');
}
.pngalpha{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
background:url(http://www.jb51.net/attachments/200510/03_124401_ie.png) no-repeat;
width:100px;
height:100px;
}
</style>
</head>
<body bgcolor="#3399ff#">
<!- And this is your code to implement the image ->
<div>透明</div>
<div class="pngholder"><div class="pngalpha"></div></div>
<div>不透明</div>
<img src="http://www.jb51.net/attachments/200510/03_124401_ie.png"/>
</body>
</html>
转载于:https://www.cnblogs.com/JoinZhang/archive/2010/09/02/1815883.html
使PNG图片在IE浏览器实现透明效果代码相关推荐
- css透明效果代码结构,用CSS实现背景半透明效果的方法实现_css
如何用css实现背景半透明效果?做过活动页面的同学可能会遇到要做背景半透明的效果,我们一般的做法是用两个层,一个用于放文字,另一个用于做透明背景,因为透明滤镜的效果会影响到里面的内容.不过如果你只需求 ...
- FLASH透明效果代码
//代码如下: <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase=http://do ...
- css3 动画图片滚动条,CSS3实现滚动条动画效果代码分享
一团网资讯 一团资讯 > css3 > CSS3实现滚动条动画效果代码分享 CSS3实现滚动条动画效果代码分享 2018-05-01 08:57:16 发布者:来源网络 先给大家一 ...
- 网页设计中 透明效果的使用技巧
运用好透明效果是提高网页设计水准的重要方法之一.如同使用其他方法一样,设计师们有很多种手段将透明效果运用到网页中,今天这篇文章就来好好和您分享一下关于"透明"的实用小技巧哟:) 在 ...
- CSS定义通用透明效果
分别定义各种浏览器的透明效果: .transparent{filter:alpha(opacity=12);-moz-opacity:0.12;opacity:0.12;background-colo ...
- 使png 图片在网页上透明显示
周六参加webtech 第八期web交流会,讲到图片优化方面,其实涉及到一个png图片替代gif ,但是在网页中无法实现透明效果. 观察淘宝的图片,其实都是png的.解决的方案是采用png-8 实现透 ...
- 图片没有透明效果html,为什么png不是透明底
为什么把图片保存成PNG格式 背景依旧不能透明? 我把图片部分透明化之后存图,在PS中能够清楚地看到透明区域,但一保存为P你不管它在电脑里怎么样 在电脑里是看不出来透明的 要上传到网上才有效果 存为p ...
- CSS实现背景图片透明文字不透明效果的两种方法
网页设计中经常要在背景图上放一些文字介绍,这就需要背景图片能有透明效果以便突出显示文字信息,经多方查阅,终于找到了2种有趣的方法. 1.在文字层添加rgba样式实现半透明效果 方法: 背景图片层添加样 ...
- Google图片存储格式WebP增加与PNG类似背景透明效果
Google近日在博客上通报了他们提出的新型图片存储格式 - WebP - 的最新进展.Google有意让WebP成为新的网络图形存储格式标准以挑战JPEG.PNG等格式的地位.从博文中我们了解到,W ...
最新文章
- 配置主机路由表（route）（两）
- thinkphp scws mysql_thinkphp buildHtml 函数实现网站静态化
- MemSQL初体验 - (1)传说中速度最快的关系数据库软件
- flex 3与flex 4的不同
- 最长不重复子串python_python经典算法题：无重复字符的最长子串
- 『线性同余方程和中国剩余定理』
- 微信朋友圈内容能删除吗？
- getFullYear 方法
- http://www.jb51.net/article/51934.htm
- DHTMLET-Cascading Style Sheet 2.0 中文手册
- 计算机图形学学习：GAMES101
- Android 组件化代码中心化问题之.api化方案
- centos7 nvidia显卡安装
- JMM(Java Memory Model)
- Android 实时监听耳机拔除
- VSCode中vue拓展vetur整理代码时的尖括号换行问题
- SpringBoot 中使用HikariPool 报错Possibly consider using a shorter maxLifetime value.
- 用vulkan写个引擎 （二）vk组件
- C# 调用大漠插件的方法
- A slap on the back 祝贺一下