- 浏览: 197129 次
- 性别:
- 来自: 上海
最新评论
-
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 1116如何优化JavaScript脚本的 ... -
几种流行的AJAX框架jQuery,Mootools,Dojo,Ext JS的对比
2008-08-18 16:53 1642AJAX是web20的基石,现在 ... -
CSS技巧集合
2008-08-14 13:08 1003一.使用css缩写 使 ... -
记录没有看完
2008-07-24 10:50 835http://www.iteye.com/news/1816 -
实现不同域(Domain)之间的数据交换
2008-07-15 15:49 1436引言 前些天在对公司原有的 web 应用进行改版时遇到一个问题 ... -
网页中超长文字的断行问题
2008-07-15 10:11 1897网页中超长文字的断行问题2006/9/25 at 01:50 ... -
JS中的instanceof和typeof
2008-06-24 16:35 1671对于instanceof和typeof,以前偶尔的用到过,特别 ... -
JavaScript OOP
2008-06-16 15:25 836JavaScript的对象总有4类: 脚本对象 ... -
prototype.js简易教程文档2
2008-05-26 17:41 11334.15. options 参数对象 AJAX操作中一个重要的 ... -
prototype.js简易教程手册1
2008-05-26 17:39 14951. Prototype是什么? 或许你还没有用过它, pro ... -
JavaScript[对象.属性]集锦
2008-05-26 17:37 914SCRIPT 标记 用于包含JavaScript代码. ... -
使用Session常见问题集锦
2008-05-26 17:35 1049问:为什么Session在有些 ... -
css例子
2008-05-22 19:15 1455原文作者:Douglas Bowman ... -
转载--Cookie专题
2008-05-22 16:28 1183Document 对象中有一个cook ... -
Javascript数组及其操作
2008-05-22 16:26 7893本文介绍如下几个方面的内容: 1.如何创建数组 2.如何对数 ... -
使用JavaScript检测浏览器的相关特性
2008-05-22 13:06 2141一、检测浏览器的名称 问题: 不同的浏览器对javas ... -
js事件
2008-05-22 11:23 1741一.今天的事件 事件是DOM的一部分,在DOM Level ... -
ie和firefox的兼容性问题
2008-05-22 11:21 9641.event.srcElement问题 在IE下,even ... -
学习javascript的事件
2008-05-22 11:18 949在很多语言的学习中,“事件”都是一个比较难理解,但是又是一个很 ... -
js的&&和&,||和|运算符两个不同点
2008-05-22 11:15 11731.性能上的比较 如果&&的第一个运算数是f ...
相关推荐
IE6下PNG背景透明的方法IE6下PNG背景透明的方法IE6下PNG背景透明的方法IE6下PNG背景透明的方法IE6下PNG背景透明的方法
js_IE6支持png透明解决png_ie6下不透明背景图片
IE6不兼容png透明背景解决方法,有效解决IE6下 透明图片浅灰背景的问题
IE6 png背景图片透明,在IE6下,让PNG背景图片透明,效果不错,谁用谁知道。
完美解决IE6下png背景、图片透明问题
IE6下PNG背景透明的方法.rarIE6下PNG背景透明的方法.rarIE6下PNG背景透明的方法.rarIE6下PNG背景透明的方法.rarIE6下PNG背景透明的方法.rarIE6下PNG背景透明的方法.rar
DD_belatedPNG完美地解决了“iepngfix.htc”会出现的无法平铺,没法定位以及所加超链接的点击区域无法使用等问题!
1.“ie6-png-2(filter)”文件中,滤镜控制调用背景透明和js控制插入图片透明不能同时出现,这样在不同浏览器下会有问题,可以分开使用; 2.“ie6-png-1(js)”文件中整理了一下更简单调用的方法,没有使用滤镜,经...
实现PNG图片在IE6下的背景透明 实现PNG图片在IE6下的背景透明 实现PNG图片在IE6下的背景透明
IE6下PNG背景透明的七种方法.web前端开发,IE6下PNG格式不兼容
IE6下png图片透明背景无法显示出来,提供解决办法
在使用IE6浏览器时,许多PNG透明图片会出现灰色的背景,加上以上代码即可实现IE6浏览器下PNG背景透明
4 如果想使用背景平铺和定位的效果,以前的步骤做完之后,我们还要再引用 iepngfix_tilebg.js 这个js,才能使png图片在ie6中平铺时实现透明效果,像下面这样: <script type="text/javascript" src="iepngfix_...
IE6中 PNG 背景透明的最佳解决方案 兼容IE6和Firefox的PNG背景透明CSS代码 IE6下png背景不透明问题的综合拓展
这一款插件可以帮你快速解决这一问题,它的核心是 iepngfix.htc 文件,自带的示例文件,将告诉你在什么情况下可以调用本插件,让PNG背景图片在不同版本的浏览器下都自动透明,示例效果如上图所示。
ie6 火狐 谷歌 png背景透明
由于IE7以下不支持图片的背景的透明.根据IE特性,我们可以用IE的滤镜来实现透明处理 你只要包含下面这个pngfix.js文件就行,如下: <!--[if lt IE 7]> <script defer type="text/javascript" src="/Js/pngfix.js"> ...
IE6下PNG背景透明的方法