IE6 背景透明
IE6 背景透明
第 1 种方法:定义一个样式,给某个div应用这个样式后，div的透明png背景图片自动透明了。（注意两处图片的路径写法不一样，本例中，icon_home.png图片与html文件在相同目录）
<!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=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
.qq {
height: 90px;
width: 90px;
background-image: url(icon_home.png)!important;/* FF IE7 */
background-repeat: no-repeat;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='icon_home.png'); /* IE6 */
_ background-image: none; /* IE6 */
}
-->
</style>
</head>
<body>
<div class="qq"></div>
</body>
</html>
第 2 种方法: 给img定义样式，页面上所有透明png即自动透明了。（这方法只对直接插入的图片有效，对背景图无效）注意，要准备一个透明的小图片transparent.gif,大小不限。必须放在和html相同的目录
请勿大量使用，否则会导致页面打开很慢!!!)
<!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=gb2312" />
<title>无标题文档</title>
<style type="text/css">
.mypng img {
azimuth: expression(
this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
this.src = "transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
this.runtimeStyle.backgroundImage = "none")),this.pngSet=true);
}
</style>
</head>
<body>
换成你的png图片
<div class="mypng">
<img src="icon_face_07.png" width="30" height="30" />
<img src="icon_face_10.png" width="30" height="30" />
<img src="icon_face_08.png" width="30" height="30" />
</div>
</body>
</html>
第 3 种方法:用JS实现,加上一段js代码后,所有插入的透明png自动透明了.（注意，这方法也是只对直接插入的图片有效，对背景图无效）
<!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=gb2312" />
<title>无标题文档</title>
<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>
<style type="text/css">
<!--
body {
background-color: #9999CC;
}
-->
</style></head>
<body>
把图片换成你自己的图片
<img src="img/icon_face_03.png" width="30" height="30" /><!--把图片换成你自己的图片 -->
<img src="img/icon_face_05.png" width="30" height="30" />
<img src="img/menu_title_over.png" width="130" height="36" />
</body>
</html>
方法四
// 修复 IE 下 PNG 图片不能透明显示的问题
function fixPNG(myImage) {
var arVersion = navigator.appVersion.split("MSIE");
var version = parseFloat(arVersion[1]);
if ((version >= 5.5) && (version < 7) && (document.body.filters))
{
var imgID = (myImage.id) ? "id='" + myImage.id + "' " : "";
var imgClass = (myImage.className) ? "class='" + myImage.className + "' " : "";
var imgTitle = (myImage.title) ? "title='" + myImage.title + "' " : "title='" + myImage.alt + "' ";
var imgStyle = "display:inline-block;" + myImage.style.cssText;
var strNewHTML = "<span " + imgID + imgClass + imgTitle
+ " style=\"" + "width:" + myImage.width
+ "px; height:" + myImage.height
+ "px;" + imgStyle + ";"
+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
+ "(src=\'" + myImage.src + "\', sizingMethod='scale');\"></span>";
myImage.outerHTML = strNewHTML;
} }
window.onload=function(){
document.getElementById("top").style.height=screen.height/5+"px";
}//
</script>
用法如下：
<img src="logo.png" width="328" height="325" border="0" onload="fixPNG(this)" />
IE6 背景透明的更多相关文章
- ie6背景透明的设置方法 ie6背景颜色透明和png图像透明解决方法
IE6浏览器,让我们又爱又恨.爱它的是,可以让我们写的代码的时候,可以更标准,恨的是,它有太多无厘头的IE6常见bug(详情点击),让我们焦头烂额.现在现在用百度浏览器调查,国内占有率不到6%了,但是 ...
- 使IE6下PNG背景透明的七种方法任你选
原文地址:http://blog.csdn.net/mosliang/article/details/6760028 相信如何解决png在ie6下透明的问题困扰了很多人.为了追求更好的页面效果,很多人 ...
- IE6中 PNG 背景透明的最佳解决方案
为什么要使用 PNG 图片? 简 单来说,使用 PNG 格式比起 GIF 来表现色彩更丰富,特别是表现渐变以及背景透明的渐变要比GIF格式出色很多.目前,最新的浏览器基本上都支持PNG格式.唯独有万恶 ...
- 关于ie6下png背景透明
今天我突破了一个技术难关,真的是头都大了.. 关于ie6下png背景透明的解决方法,我就不多说了,网上有很多解决方法,我用的是其中的一种: <script type="text/jav ...
- 如何在ie6/ie7/ie8中实现iframe背景透明
最近做了一个项目,涉及到ie8iframe背景透明的问题,做了老半天,才把它搞定的,现在把我的经历贴出来和大家分享: 众所周知的根据W3C CSS 2.1 规范规定,''''background-co ...
- 通过IE私有滤镜让IE6 7 8支持背景透明，内容不透明效果。
CSS3已经支持背景rgba的rgba透明度,这一方法可以避免元素内容也随背景一起变透明(详情请阅http://www.cssha.com/css3-new-knowledge-student).但是 ...
- 【原】CSS实现背景透明，文字不透明，兼容所有浏览器
11.11是公司成立的日子,16岁啦,我呢3岁半,感谢公司给了这样一个平台,让我得以学习和成长,这里祝愿公司发展越来越好~ 进入主题,每年11月11号是光棍节,产生于校园,本来只是一流传于年轻人的娱乐 ...
- CSS实现背景透明，文字不透明（兼容各浏览器）
在 FF/Chrome 等较新的浏览器中可以使用css属性background- color的rgba轻松实现背景透明,而文字保持不透明.而IE6/7/8浏览器不支持rgba,只有使用IE的专属滤镜f ...
- CSS实现背景透明，文字不透明，兼容所有浏览器
11.11是公司成立的日子,16岁啦,我呢3岁半,感谢公司给了这样一个平台,让我得以学习和成长,这里祝愿公司发展越来越好~ 进入主题,每年11月11号是光棍节,产生于校园,本来只是一流传于年轻人的娱乐 ...
随机推荐
- HDU 4750
解题方法,,,首先应该可以看出来是一颗 最小生成树,任意一条的边的价值是不同的:所以计算出最小生成树的每一条边有多少对顶点满足他的 f 值就是这条边的 权值,因此可以在生成最小生成树的时候,进行一下统 ...
- NSThread小笔记
接口 Initializing an NSThread Object – init – initWithTarget:selector:object: Starting a Thread + deta ...
- yii2 html下拉框
下拉框 带默认值 <?php $form=ActiveForm::begin(); echo $form->field($model,'uname', ['inputOptions'=&g ...
- 剑指offer—第三章高质量的代码（按顺序打印从1到n位十进制数）
题目:输入一个数字n,按照顺序打印出1到最大n位十进制数,比如输入3,则打印出1,2,3直到最大的3位数999为止. 本题陷阱:没有考虑到大数的问题. 本题解题思路:将要打印的数字,看成字符串,不足位 ...
- 批量迁移Oracle数据文件，日志文件及控制文件
有些时候需要将Oracle的多个数据文件以及日志文件重定位或者迁移到新的分区或新的位置,比如磁盘空间不足,或因为特殊需求.对于这种情形可以采取批量迁移的方式将多个数据文件或者日志文件实现一次性迁移.当 ...
- C++中关于类型转换的问题讨论
这里以signed/unsigned char, signed/unsigned short, signed/unsigned int类型为例, 讨论一下基本类型转换的基本原理,这样我们在编程中碰到由 ...
- 插件五之滚动条jquery.slimscroll.js
前言 slimscroll.js用于模拟传统的浏览器滚动条(竖向),原理为原内容内置于一个仅可视区域显示层,使用2个div层用于模拟滚动条和滚动条背景轨道监听滚动条div高度变化来控制内容层位置(猜测 ...
- Java并发编程-volatile
一. volatite 简述Java 语言提供了一种稍弱的同步机制,即 volatile 变量.用来确保将变量的更新操作通知到其他线程,保证了新值能立即同步到主内存,以及每次使用前立即从主内存刷新. ...
- 使用curl操作openstack swift
openstack官网有专门的开发者文档介绍如何使用curl操作swift(http://docs.openstack.org/api/openstack-object-storage/1.0/con ...
- linux下expect使用教程
一.expect介绍 Expect是Unix系统中用来进行自动化控制和测试的软件工具,由DonLibes制作,作为Tcl脚本语言的一个扩展,应用在交互式软件中如telnet,ftp,Passwd,fs ...