透明PNG背景图片CSS设置(AlphaImageLoader滤镜)
应用PNG图片的透明或半透明的特性能做出非常漂亮的网页来。Firefox和Opera对PNG的支持非常的好,都是IE却无视PNG图片这一特性的“存在”,虽然IE7已经支持都是IE6还是不行。查了一些资料,基本解决了这一问题,准备应用到PJskin上。
虽然有让IE6支持PNG透明背景的JS程序,都是不是很方便,还是用CSS来实现的好。使用到的就是:
IE5.5+的AlphaImageLoader滤镜
QUOTE:语法:
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代码(还不是完全正确的代码):
QUOTE:#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图片的样式。代码如下
分享到:
相关推荐
如果你自己是做网页设计的,当然也希望只在自己的电脑上就能看清楚页面在IE6、IE7、IE8、FireFox等浏览器下的效果啦~~可是,微软偏偏要我们割爱,安装了IE7后,IE6也在我们的电脑中消失了。而对很多像我这样的人来...
尤其是在处理旧版Internet Explorer(如IE6、IE7、IE8)与现代浏览器(如Firefox、Chrome等)之间的样式差异时,CSS Hack技巧成为了必不可少的工具。本文将深入探讨不同浏览器兼容性的CSS Hack代码及其实例,帮助...
标签中的“ie6.0s”可能是指IE6的某个特定版本或服务包,“ie6.0升级包”明确了这是一个针对IE6的升级程序,“ie6.x”可能是指包括IE6所有版本的统称,“ie6_x86”强调了这适用于32位系统,“ie6.0sp1”则直接对应了...
标题中的“IE6绿色版”指的是Internet Explorer 6的一个便携式版本,它不需要正式安装在计算机上,而是以一个可执行文件(.exe)的形式存在。这种绿色版的浏览器通常是为了满足开发者或测试人员的需求,他们需要在不...
### 浏览器兼容性问题解析:针对IE6、IE7与Firefox的样式处理 在Web开发中,浏览器兼容性始终是一项重要的考虑因素。不同浏览器对CSS的支持程度不一,尤其是对于早期版本的Internet Explorer(IE)如IE6、IE7,以及...
本文将详细探讨“ie7恢复IE6完美卸载IE7”的过程,以及为何要避免手动卸载可能导致浏览器崩溃的风险。 首先,我们要理解为什么用户会选择卸载IE7并恢复到IE6。IE6虽然已经很老旧,但在某些特定环境下,例如企业内部...
标题中的“IE6 for WIN7”指的是在Windows 7操作系统上运行Internet Explorer 6(简称IE6)的解决方案。在Windows 7系统默认情况下,无法直接安装和使用IE6,因为该浏览器版本较老,微软已经停止支持,并推荐使用...
### IE6、IE7与IE8的区别 #### 浏览器兼容性问题解析 随着Web技术的不断发展,浏览器之间的差异也日益明显。特别是在早期的浏览器版本中,如Internet Explorer(简称IE)的不同版本之间,存在着显著的差异。本文将...
使IE5,IE6兼容到IE7模式(推荐) <!–[if lt IE 7]> ”http://ie7-js.googlecode.com/svn/version/2.0(beta)/IE7.js” type=”text/javascript”></script> <![endif]–> 使IE5,IE6,IE7兼容到IE8模式 <!–[if lt ...
IE6,IE7,IE8,IE9绿色版(单个exe文件,不与系统中浏览器冲突) 现在大多数系统都已经用IE了,对于开发人员需要测试与IE的兼容性找一款IE的操作系统比较困难. 网上找到的都说用IETester,但我实际测了并不能百分百还原IE...
【标题】"ieTest ie6 ie7 ie8 ie9 ie5.5"指的是一个用于测试Internet Explorer浏览器不同版本的工具,IETester。这款软件允许开发者和网站管理员在一台计算机上同时运行并测试IE5.5到IE9等多个版本的浏览器,确保...
"IE兼容IE6,IE7,IE8,IE9,IE10 js文件"的标题和描述提示我们,这个压缩包可能包含了一系列专门用于解决这些版本之间兼容性问题的JavaScript脚本。 JavaScript是一种广泛用于网页和网络应用的编程语言,它的主要功能...
在探讨IE6、IE7、IE8对CSS和JavaScript支持的差异时,我们可以发现一系列显著的兼容性问题和解析规则的变化。以下是对这些差异的详细分析: 1. **JavaScript性能和垃圾收集**: - 在IE6中,JScript引擎在处理大量...
标题“ie6sp1forwindows2000”指的是Internet Explorer 6 Service Pack 1,这是微软为Windows 2000操作系统发布的浏览器版本。这个服务包是针对IE6的一个重要更新,它包含了自IE6初始发布以来的一系列修复、改进和...
标题中的“ie6windows绿色免安装完美兼容IE8”指的是一个特别版本的Internet Explorer 6 (IE6)浏览器,该版本被设计为无需正式安装即可使用的绿色版。在Windows操作系统中,绿色版软件通常指的是那些不需要通过传统...
【描述】"IE6绿色版,免安装,兼容Win7"揭示了这个版本的两个关键特性:首先,它是绿色版,意味着它不涉及标准的安装过程,用户可以直接运行提供的可执行文件(如Microsoft Internet Explorer 6.exe)启动浏览器,这...
标题中的“IE6 绿色 兼容win764位”指的是Internet Explorer 6(简称IE6)的一个特别版本,它被优化以在Windows 7 64位操作系统上正常运行,而且是绿色版,意味着它不需要安装,可以直接运行,不写入系统注册表,...
在进行Web开发的过程中,我们经常会遇到浏览器兼容性问题,尤其是早期的Internet Explorer(IE)版本如IE6、IE7和IE8与现代浏览器如Firefox之间的差异。为了确保网站能够在不同浏览器下正常显示,开发者需要使用特定...
由于不同版本的Internet Explorer(IE6、IE7、IE8、IE9、IE10)对Web标准的支持程度不一,这导致在这些浏览器中运行同一段代码可能会出现差异。幸运的是,有一些技术手段可以帮助我们解决这些问题。 首先,一个关键...
标题中的“将ie7恢复为ie6的恢复工具”指的是一个专门设计用于将用户的Internet Explorer浏览器版本从7降级到6的程序。在早期的Windows操作系统中,IE6是默认的浏览器,但随着技术的发展,Microsoft推出了更新的版本...