应用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;
}
html>body #div1 {
background-repeat: repeat;background-image: url(bj1.png);
}
* #div1 {filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="bj1.png")
}
需要注意的是:AlphaImageLoader滤镜会导致该区域的链接和按钮无效,解决的办法是为链接或按钮添加:position: relative;这样条代码,使其相对浮动。AlphaImageLoader无法设置背景的重复,所以对图片的切图精度会有很高的精确度要求。
其实使用PNG透明特性做网页主要解决的问题是IE6对PNG图片的读取,需要应用滤镜:
filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL )
写法的例子:
* #container #header
{filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=image, src="http://huziyi.com/png/h_bj.png");
}
同时为了让FF单独读取背景(FF不支持滤镜,当是支持PNG透明特性),单独写段CSS:
html>body #container #header{
background-image: url(h_bj.png);
}
星玄宇告诉我还有更好的优化写法,可以减少IE7下的读取速度:用*html #来单独为IE6写滤镜的代码,html>body 可以同时被IE7和FF读取,这样就让IE7避免滤镜的使用以加快读取速度。我还没有测试。
在做PNG的皮肤中,PNG文件的切图要求很高,最好做到精确的切图和层的设置。链接失效的问题不仅仅可以在链接CSS里设置相对定位,也可以对该内容所在的层进行相对定位设置。
分享到:
相关推荐
extJS的主题皮肤 有灰色,VISTA黑,天蓝色,绿叶色,粉红,紫色.
extjs4.0引用的JS和CSS文件,方便实用
项目中遇到Extjs3.0在IE9中不兼容,现有两种解决方法
最近小弟做了Extjs实现实现下拉框联动的效果,参考了好久才学会,闲下来发一个简单的例子。。呵呵
Extjs分页使用java实现数据库数据查询.docx
把皮肤文件解压 把css文件 如xtheme olive css 拷贝到extjs的resources目录下css文件夹里面:">extjs的默认皮肤很好看 但是我们还可以变换样式切换其他皮肤 1 直接添加其他css文件换肤 好多皮肤上网就可以收到的...
extjs实现动态树
Extjs 下拉菜单实现拼音输入进行检索
storebar extjs通过store实现toolbar
Extjs实现用户登录。。。。。。。。。。。。。。。。。
EXTJS 样式 extjs字体大小 可以轻松在这个CSS文件里面调整EXTJS插件的字体大小,对这个有需求的同志们有福了!
ExtJS 表格的功能实现,包括单元格编辑,数据的获取。
ExtJS+SSH实现登录及权限拦截完整版
extjs4.0结合My97DatePicker4.7版本使用 使用简单 方便 解决extjs中日期控件不能显示时间的问题 下载后将其放到extjs目录的examples下 直接运行date.html即可 extjs4.0版本 4.0以前的版本没有测试过 如果有4.0版本...
ExtJS(css+div+js) 未来发展的趋势,开发人员必学
ExtJS实现Excel导出,最常用的可以解决大部分问题
ExtJS4.0MVC学习,适合初学者。
利用Extjs和css实现 加载时的缓冲效果页面
前者支持IE和火狐 后者IE可以正常取得控件,而火狐不能,这点没有解决,并且在使用上要加入两个JAR包,这些此压缩包里已给出 所以笔者还是推荐前一种extjs控件 此压缩包中完全能实现的功能是在extjs中让本地照片预览...
ExtJs +Echart 实现桑基图绘制,包括前端页面搭建,后端数据赋值,桑基图数据绑定,桑基图Json后台格式定义,Json格式转换到前台接收等,下载后如果右运行不了,请加群,备注ExtJs桑基图代码,如果好用,请给五分...