- 浏览: 1596771 次
- 性别:
文章分类
- 全部博客 (2929)
- 非技术 (18)
- Eclipse (11)
- JAVA (31)
- 正则表达式 (0)
- J2EE (4)
- DOS命令 (2)
- WEB前端 (52)
- JavaScript (69)
- 数据库 (8)
- 设计模式 (0)
- JFreechart (1)
- 操作系统 (1)
- 互联网 (10)
- EasyMock (1)
- jQuery (5)
- Struts2 (12)
- Spring (24)
- 浏览器 (16)
- OGNL (1)
- WebService (12)
- OSGi (14)
- 软件 (10)
- Tomcat (2)
- Ext (3)
- SiteMesh (2)
- 开源软件 (2)
- Hibernate (2)
- Quartz (6)
- iBatis (2)
最新评论
在IE7和Firefox下肯定没问题!但是到了IE6下透明部分就变成灰色了。
如何使用我们前面说的AlphaImageLoader滤镜呢?很简单代码可以这样写(以top区域为例):
.header .top{
width:1000px;
height:116px;
margin-left:auto;
margin-right:auto;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader
(enabled=true, sizingMethod=scale, src="/wp-content/themes/xilin/images/topbg.png");
}
这样我们在IE6下看效果的时候PNG的透明层就起作用了。但是当我们返回Firefox的时候,PNG的图没了?别急这是因为 AlphaImageLoader滤镜是IE系列浏览器的专属标签,Firefox当然不支持了。必须使用background-image属性在 Firefox下才起作用:
如果我们这样吧background-image加入到CSS样式中的话,如下:
.header .top{
width:1000px;
height:116px;
margin-left:auto;
margin-right:auto;
background-image:url(/wp-content/themes/xilin/images/topbg.png);
/* Firefox只支持这个方式 */
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(enabled=true, sizingMethod=scale, src="/wp-content/themes/xilin/images/topbg.png");
}
这样我们在IE6 下看效果的时候PNG的透明层就起作用了。但是当我们返回Firefox 的 时候,PNG的图没了?别急这是因为AlphaImageLoader滤镜 是IE系列浏览器的专属标签,Firefox 当 然不支持了。必须使用background-image 属性在Firefox 下才 起作用:
如果我们这样吧background-image 加入到CSS 样式中的话, 如下:
.header .top{
width:1000px;
height:116px;
margin-left:auto;
margin-right:auto;
background-image:url(/wp-content/themes/xilin/images/topbg.png);
/* Firefox只支持这个方式 */
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(enabled=true, sizingMethod=scale, src="/wp-content/themes/xilin/images/topbg.png");
}
会发现IE6 下的PNG 透明效果又没了!这个是因为在IE6 下background-image 也 起作用了,在IE6 下就有两个图重叠在一起,另一个属性会把灰色部分显示出来,所以我们必须使用一些小技巧,让浏览器 只去读属于自己的样式代码。
我们知道Firefox 、Opera 等完全支持PNG 透 明图片的浏览器也支持子选择器(>),而IE不识别(包括IE7),所有我们可以通过这来定义Firefox、Opera等浏览器中PNG图片的样 式。
代码如下:
html > body .top{
/* for Firefox */
background-image:url(/wp-content/themes/xilin/images/topbg.png);
background-repeat: no-repeat;background-position: center center;
}
同时,我们通过只有IE才识别的通配符(∗),来定义IE浏览器中的滤镜。代码如下:
* .top{
/* for IE6 */
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader
(enabled=true, sizingMethod=scale, src="/wp-content/themes/xilin/images/topbg.png");
/* 这里在样式前加下划线是为了防止IE7浏览器来读取这个样式 */
}
这样,咱们要的效果就出来了,IE6、IE7、Firefox、Opera浏览器都能很好的显示这些透明图层,而互不干扰。
注意 : AlphaImageLoader 滤镜 会导致该区域的链接和按钮无效,解决的办法是为链接或按钮添加:position: relative; 这 样条代码,使其相对浮动。AlphaImageLoader 无法设置背景的重复,所以对图片的切图精度会有很高的精确 度要求。
发表评论
-
15款基于浏览器扩展的WEB开发工具
2009-07-29 08:44 746WEB开发工具的使用已经 ... -
WEB 服务器调试利器 -- Tamper Data(转)
2009-07-29 08:53 725一. 简介 作为 Firefox 的插件, T ... -
图片和文字放一起,不能居中的解决方法
2009-07-29 14:47 920<td align="center" ... -
深入浅出URL编码
2009-08-11 19:58 612版权声明:如有转载请求,请注明出处: http://blog ... -
IE和Firefox之间的JavaScript差异
2009-08-17 17:18 563尽管 JavaScript 历史上使用冗长而令人生厌的代码块来 ... -
【CSS布局.2】绝对定位和相对定位
2009-08-20 15:51 575Absolute ,CSS 中的写法是:positio ... -
【CSS布局.1】盒子模型
2009-08-20 15:51 586例子: .box { width: 200px; ... -
【CSS布局.4】五种CSS布局类型
2009-08-20 15:52 615CSS 布局的五种类型概述 有五种基本布局定位类型可供选择: ... -
【CSS布局.3】列表样式定义法
2009-08-20 15:52 577CSS代码: .list{ margin: 0px 10 ... -
区别不同浏览器,CSS hack写法
2009-08-20 16:01 597区别IE6 与FF : backgroun ... -
常用CSS缩写语法总结
2009-08-24 17:55 636使用缩写可以帮助减少你CSS文件的大小,更加容易阅读。css缩 ... -
CSS颜色代码大全
2009-08-25 15:55 822CSS颜色代码大全 FFFF ... -
如何去掉ie里面的关闭按钮,和屏蔽ALT+F4 (转载)
2009-09-01 17:46 757去掉关闭按钮可以使用无边框窗口设计,不过IE6中已经不支持了。 ... -
CSS @import at规则
2009-09-02 10:40 654at规则 HTMLDog指南 > CSS高级指南 &g ... -
彻底弄懂CSS盒子模式之一
2009-09-02 17:05 653前言 如果你想尝试一 ... -
彻底弄懂CSS盒子模式之一
2009-09-02 17:06 590熟悉工作流程 在真正开始工作之前我们脑海中要形成这样一种 ... -
彻底弄懂CSS盒子模式之二
2009-09-02 17:07 581作者:唐国辉 实现原理动画演示:http://www ... -
彻底弄懂CSS盒子模式之三
2009-09-02 17:08 703一、下面请看float的精彩表演,有请。 大 ... -
彻底弄懂CSS盒子模式之五
2009-09-02 17:09 557在本人上一篇教程《彻 ... -
彻底弄懂CSS盒子模式之四
2009-09-02 17:09 653前言 在用CSS控制排版过程中,定位一直被人认为是一个难 ...
相关推荐
ie6兼容png透明图片,导入js即可使ie6兼容png透明图片,无需调用。
js_IE6支持png透明解决png_ie6下不透明背景图片
网页设计在制作网站时时常会遇见IE6的PNG图片透明兼容问题,网上也有很多介绍关于IE6浏览器不显示PNG透明图片的解决方案,但多数是有问题的。应用PNG图片的透明或半透明的特性能做出非常漂亮的网页来。Firefox和...
IE6下PNG格式图片透明问题JS代码,详情全在里面
<script type="text/javascript" src="images/iepngfix_tilebg.js"> img, div, input { behavior: url("images/iepngfix.htc") } 在页面中head部分加上如上代码,<!--[if lt IE 7]>是为了让IE6以下浏览器执行...
<script type="text/javascript" src="image/ie_png.js"> <script type="text/javascript"> ie_png.fix('.png, .menu ul li a span'); // 第二个参数为含有png的标签id(css) ie_png.fix('.png, .logo span');...
内含插件及使用说明 ie(IE)png半透明插件使用微软的VML语言对PNG图片进行重新绘制,以达到半透明的效果,并且能支持background-position和background-repeat属性。
js修复IE不能显示PNG图片透明背景的方法、解决浏览器不兼容的问题
js实现IE6下png图片透明的代码。js实现IE6下png图片透明的代码。
通过js实现ie6下png图片实现半透明,这是一个简单的示例。
解决IE6浏览器下的PNG透明图片显示问题,调用方法见压缩包内的txt文档
DD_belatedPNG.js IE6支持png图片透明度的文件使用方法: DD_belatedPNG.fix("标签ID,标签Class,标签名");
包含了ie6下各种png图片透明的例子:用滤镜方法解决ie6下不透明问题,用pngfix js 的方法解决ie图片不透明,ie6 png透明 htc文件的方法
javascript支持ie6 png图片透明
处理png图片在ie6上不透明问题,文件内包含两种处理png透明都问题可以解决改问题,一种是js处理 另一种是htc文件使用处理
ie6中使用png可以实现透明效果的javascript
ie 6下面PNG图片的JS插件,能解决所有PNG透明图片正常显示
4 如果想使用背景平铺和定位的效果,以前的步骤做完之后,我们还要再引用 iepngfix_tilebg.js 这个js,才能使png图片在ie6中平铺时实现透明效果,像下面这样: <script type="text/javascript" src="iepngfix_...
1.“ie6-png-2(filter)”文件中,滤镜控制调用背景透明和js控制插入图片透明不能同时出现,这样在不同浏览器下会有问题,可以分开使用; 2.“ie6-png-1(js)”文件中整理了一下更简单调用的方法,没有使用滤镜,经...
ie6png图片透明,只需把js加入到html文件的头部即可!