- 浏览: 200641 次
- 性别:
- 来自: 上海
最新评论
-
zhuzhuaijq:
Flash OBJECT和EMBED标签详解 -
matt.u:
好像有点深奥。
一篇比较好演示AS的重构方法 -
luofeng113:
分析得不错,
flex编程感受 -
felixsky:
请问flexunit如何测试private和internal的 ...
FLEXUnit应用 -
wv1124:
你不能分个页啊,看得人都要死了
Apollo: 开发者问答录
http://www.163show.cn/blog/index.html
应用PNG图片的透明或半透明的特性能做出非常漂亮的网页来。Firefox和Opera对PNG的支持非常的好,都是IE却无视PNG图片这一特性的“存在”,虽然IE7已经支持都是IE6还是不行。查了一些资料,基本解决了这一问题,准备应用到PJskin上。
虽然有让IE6支持PNG透明背景的JS程序,都是不是很方便,还是用CSS来实现的好。使用到的就是:
IE5.5+的AlphaImageLoader滤镜
语法:
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 地址指定背景图像。假如忽略此参数,滤镜将不会作用。
说明:
在对象容器边界内,在对象的背景和内容之间显示一张图片。并提供对此图片的剪切和改变尺寸的操作。如果载入的是PNG(Portable Network Graphics)格式,则0%-100%的透明度也被提供。
PNG(Portable Network Graphics)格式的图片的透明度不妨碍你选择文本。也就是说,你可以选择显示在PNG(Portable Network Graphics)格式的图片完全透明区域后面的内容。
了解了以上的内容,可以写一段简单的CSS代码(还不是完全正确的代码):
#div1 {
height: 600px;
width: 260px;
padding: 20px;
background-repeat: repeat;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="bj1.png"
}
这段简单的CSS代码就可以在IE中正常的显示PNG透明背景,但是会发现在FF下不会出现背景,分析原因:
AlphaImageLoader滤镜只能被IE支持,FF是不支持该滤镜的
有些初次写的时候很多人会这样:
在代码中添加这样一段: background-image: url(bj1.png);
添加这样一段代码虽然能解决FF下的问题,都是IE又出现问题:新的背景会覆盖在滤镜的背景之上,导致滤镜显示无效,这时候就用到IE和FF对CSS读取的区别特性了:
Firefox、Opera等完全支持PNG透明图片的浏览器也支持子选择器(>),而IE不识别(包括IE7),所有我们可以通过这来定义Firefox、Opera等浏览器中PNG图片的样式。代码如下:
html>body #div1 {
background-repeat: repeat;background-image: url(bj1.png);
}
同时,我们通过只有IE才识别的通配符(*),来定义IE浏览器中的滤镜。代码如下:
* #div1 {filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="bj1.png")
}
而#div1 {}就放一些IE和FF共用的设置来减少代码文件的大小。最终就是这样:
#div1 {
height: 600px;
width: 260px;
padding: 20px;
background-repeat: repeat;
}
/* for ie7 ff*/
html>body #div1 {
background:url(../images/menu1.png) no-repeat;
}
/* for ie6 */
* #div1 {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/menu1.png', sizingMethod='crop');
}
需要注意的是:AlphaImageLoader滤镜会导致该区域的链接和按钮无效,解决的办法是为链接或按钮添加:position: relative;这样条代码,使其相对浮动。AlphaImageLoader无法设置背景的重复,所以对图片的切图精度会有很高的精确度要求。
--------------------------------------------------------------------
如果在网页中直接插入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>
--------------------------------------------------------------------
如果是想使用png做背景透明的话,需要用到css滤镜和hack:
html>body .png { background:url(1.png); width:300px; height:100px; border:#000 solid 1px;}
/* ie6 */* html .png { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='1.png');
background:none; width:300px; height:100px; border:#000 solid 1px;}
应用PNG图片的透明或半透明的特性能做出非常漂亮的网页来。Firefox和Opera对PNG的支持非常的好,都是IE却无视PNG图片这一特性的“存在”,虽然IE7已经支持都是IE6还是不行。查了一些资料,基本解决了这一问题,准备应用到PJskin上。
虽然有让IE6支持PNG透明背景的JS程序,都是不是很方便,还是用CSS来实现的好。使用到的就是:
IE5.5+的AlphaImageLoader滤镜
语法:
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 地址指定背景图像。假如忽略此参数,滤镜将不会作用。
说明:
在对象容器边界内,在对象的背景和内容之间显示一张图片。并提供对此图片的剪切和改变尺寸的操作。如果载入的是PNG(Portable Network Graphics)格式,则0%-100%的透明度也被提供。
PNG(Portable Network Graphics)格式的图片的透明度不妨碍你选择文本。也就是说,你可以选择显示在PNG(Portable Network Graphics)格式的图片完全透明区域后面的内容。
了解了以上的内容,可以写一段简单的CSS代码(还不是完全正确的代码):
#div1 {
height: 600px;
width: 260px;
padding: 20px;
background-repeat: repeat;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="bj1.png"
}
这段简单的CSS代码就可以在IE中正常的显示PNG透明背景,但是会发现在FF下不会出现背景,分析原因:
AlphaImageLoader滤镜只能被IE支持,FF是不支持该滤镜的
有些初次写的时候很多人会这样:
在代码中添加这样一段: background-image: url(bj1.png);
添加这样一段代码虽然能解决FF下的问题,都是IE又出现问题:新的背景会覆盖在滤镜的背景之上,导致滤镜显示无效,这时候就用到IE和FF对CSS读取的区别特性了:
Firefox、Opera等完全支持PNG透明图片的浏览器也支持子选择器(>),而IE不识别(包括IE7),所有我们可以通过这来定义Firefox、Opera等浏览器中PNG图片的样式。代码如下:
html>body #div1 {
background-repeat: repeat;background-image: url(bj1.png);
}
同时,我们通过只有IE才识别的通配符(*),来定义IE浏览器中的滤镜。代码如下:
* #div1 {filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="bj1.png")
}
而#div1 {}就放一些IE和FF共用的设置来减少代码文件的大小。最终就是这样:
#div1 {
height: 600px;
width: 260px;
padding: 20px;
background-repeat: repeat;
}
/* for ie7 ff*/
html>body #div1 {
background:url(../images/menu1.png) no-repeat;
}
/* for ie6 */
* #div1 {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/menu1.png', sizingMethod='crop');
}
需要注意的是:AlphaImageLoader滤镜会导致该区域的链接和按钮无效,解决的办法是为链接或按钮添加:position: relative;这样条代码,使其相对浮动。AlphaImageLoader无法设置背景的重复,所以对图片的切图精度会有很高的精确度要求。
--------------------------------------------------------------------
如果在网页中直接插入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>
--------------------------------------------------------------------
如果是想使用png做背景透明的话,需要用到css滤镜和hack:
html>body .png { background:url(1.png); width:300px; height:100px; border:#000 solid 1px;}
/* ie6 */* html .png { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='1.png');
background:none; width:300px; height:100px; border:#000 solid 1px;}
发表评论
-
如何优化JavaScript脚本的性能
2008-08-19 10:01 1147如何优化JavaScript脚本的 ... -
几种流行的AJAX框架jQuery,Mootools,Dojo,Ext JS的对比
2008-08-18 16:53 1674AJAX是web20的基石,现在 ... -
CSS技巧集合
2008-08-14 13:08 1024一.使用css缩写 使 ... -
记录没有看完
2008-07-24 10:50 863http://www.iteye.com/news/1816 -
实现不同域(Domain)之间的数据交换
2008-07-15 15:49 1480引言 前些天在对公司原有的 web 应用进行改版时遇到一个问题 ... -
网页中超长文字的断行问题
2008-07-15 10:11 1943网页中超长文字的断行问题2006/9/25 at 01:50 ... -
JS中的instanceof和typeof
2008-06-24 16:35 1701对于instanceof和typeof,以前偶尔的用到过,特别 ... -
JavaScript OOP
2008-06-16 15:25 869JavaScript的对象总有4类: 脚本对象 ... -
prototype.js简易教程文档2
2008-05-26 17:41 11614.15. options 参数对象 AJAX操作中一个重要的 ... -
prototype.js简易教程手册1
2008-05-26 17:39 15261. Prototype是什么? 或许你还没有用过它, pro ... -
JavaScript[对象.属性]集锦
2008-05-26 17:37 949SCRIPT 标记 用于包含JavaScript代码. ... -
使用Session常见问题集锦
2008-05-26 17:35 1091问:为什么Session在有些 ... -
css例子
2008-05-22 19:15 1478原文作者:Douglas Bowman ... -
转载--Cookie专题
2008-05-22 16:28 1217Document 对象中有一个cook ... -
Javascript数组及其操作
2008-05-22 16:26 7921本文介绍如下几个方面的内容: 1.如何创建数组 2.如何对数 ... -
使用JavaScript检测浏览器的相关特性
2008-05-22 13:06 2181一、检测浏览器的名称 问题: 不同的浏览器对javas ... -
js事件
2008-05-22 11:23 1773一.今天的事件 事件是DOM的一部分,在DOM Level ... -
ie和firefox的兼容性问题
2008-05-22 11:21 9971.event.srcElement问题 在IE下,even ... -
学习javascript的事件
2008-05-22 11:18 979在很多语言的学习中,“事件”都是一个比较难理解,但是又是一个很 ... -
js的&&和&,||和|运算符两个不同点
2008-05-22 11:15 12101.性能上的比较 如果&&的第一个运算数是f ...
相关推荐
以下是关于"IE6下PNG背景透明的方法"的详细解释: 1. **CSS滤镜法**:这是最基础的解决方式,利用CSS中的`filter`属性。对于PNG8格式的图片,可以使用`filter:progid:DXImageTransform.Microsoft.AlphaImageLoader...
本文将深入探讨这个问题,并提供JavaScript解决方案来实现IE6下PNG图片的透明显示。 首先,我们需要理解为什么IE6不支持PNG透明。PNG-24格式允许半透明和全透明效果,但IE6只支持8位的PNG-8,而这种格式最多只能有...
这个库通过JavaScript和CSS的结合,使得在IE6下也能呈现出与现代浏览器一致的PNG透明效果,包括平铺、定位和链接功能。开发人员在实际应用中,需要对JavaScript和CSS有一定的掌握,才能有效地利用这个工具。
PNG是一种先进的位图格式,提供了24位颜色和透明度支持,但在IE6中,PNG-24格式的透明效果会呈现为灰色背景,这给网页设计带来了困扰。以下是对这个问题的深入探讨和解决方案。 首先,理解问题的根源:IE6对PNG-24...
在IT行业中,尤其是在网页设计和开发领域,"解决ie6下png图片背景问题"是一个经典且重要的主题。Internet Explorer 6(简称IE6)是微软公司早期推出的一款浏览器,由于其对PNG(Portable Network Graphics)图像格式...
5. **PNG透明修复脚本**:压缩包内的“IE6 PNG处理”脚本可能是一个JavaScript库,如DD_belatedPNG,它通过检测浏览器版本,对IE6下的PNG图片进行特殊处理,使其能够正确显示透明效果。这类脚本通常会分析图片,创建...
在IT领域,尤其是在网页设计和开发中,"IE6 png背景图片透明"是一个经典的问题,因为Internet Explorer 6(简称IE6)对于PNG格式图像的透明处理与其他现代浏览器存在显著差异。PNG是一种流行的图像格式,支持24位...
总之,处理IE6下的PNG透明效果是一个既需要技术知识,又需要策略和经验的过程。通过以上的方法和注意事项,开发者可以有效地解决这个问题,确保网站在各种浏览器环境下都能呈现出预期的视觉效果。
然而,通过一些技术手段,我们可以“完美解决IE6下PNG背景、图片透明问题”。 首先,我们需要了解PNG图像格式。PNG是一种无损压缩的位图格式,支持透明度设置,包括完全透明和半透明。对于其他现代浏览器,如Fire...
为了解决这个问题,开发者们开发了一系列JavaScript库和技巧,使得在IE6下也能实现PNG图像的透明效果。 1. **Alpha Image Loader滤镜**:IE6提供了一个名为"Alpha Image Loader"的滤镜,可以通过CSS样式应用到元素...
在互联网的早期,Internet Explorer 6 (IE6) 是广泛使用的浏览器之一,但它存在许多兼容性问题,其中之一就是PNG图片的背景透明问题。PNG(Portable Network Graphics)是一种支持透明度的图像格式,但在IE6中,对于...
总结来说,要解决IE6.0下的PNG背景透明和链接点击问题,开发者需要借助特定的JavaScript库(如`ie6-png.js`)和CSS技巧(如`behavior: url(ie6-png.htc)`和`z-index`)。虽然现代浏览器已经不再需要这些技巧,但理解...
4. **条件注释**:IE6特有的条件注释可以用来针对IE6应用特定的CSS样式,确保只在IE6下启用透明修复代码,不影响其他浏览器。 5. **升级或替换浏览器**:尽管这是最理想的解决方案,但实际操作中由于各种原因(如...
在互联网的早期,Internet Explorer 6(简称IE6)是主导浏览器之一,但它存在...在提供的压缩包“32.IE6下png图片透明解决方案”中,可能包含示例代码、教程或更具体的解决步骤,可以帮助进一步理解和应用这些方法。
"最好的IE6下png透明图片修复代码"提供了一个解决方案,使得在Internet Explorer 6(IE6)这种老版本浏览器中,也能正确显示具有透明效果的PNG图像。这个问题的核心在于,IE6只支持PNG-8格式的透明,而不支持PNG-24...
为了解决这个问题,开发者们利用JavaScript编写了一些脚本,以实现IE6下PNG图片的透明效果。本文将详细讲解这一技术。 PNG(Portable Network Graphics)是一种无损压缩的位图格式,支持24位色彩和8位透明通道,即...
为了解决这个问题,开发者们开发了一些JavaScript解决方案,使得IE6能够支持PNG背景图片的透明显示。 一、PNG格式与透明性 PNG(Portable Network Graphics)是一种无损压缩的图像文件格式,支持透明度和丰富的色彩...
- `blank.gif`可能是一个占位符图像,用于在IE6下显示透明区域的背景。 - 其他PNG文件如`xheart.png`, `title-background.png`, `find.small.png`等,都是待处理的PNG图像,可能在网页设计中需要透明效果。 8. **...