ie8下jquery改变PNG的opacity出现黑边
复制网上的,没有他们那个类型的博客,所以就直接复制了
这些天在做一个效果,鼠标经过,PNG图片由透明变成不透明,jquery代 码:$(element).animate({"opacity":1},1000); 但是会出现黑边,晚上查了好多办法,分别对IE8设置过滤器啊等 等,都不见效果。后面看了一篇文章说ie6不是不支持PNG格式,而是不支持PNG-24,但是能支持PNG-8.这个给了我启发,我发现了有3个办法来 解决IE8下出现黑边的问题:
1.把图片保存成PNG-8格式。
2.把背景色一起切入到PNG格式里就不会出现黑边(这个是跟JPG一样的)。
3.把背景色一起切入并保存为JPG格式。
肯定还有其他的办法,如果知道的希望可以告诉我,我很高兴能一起交流。
/////
目前互联网对于网页效果要求越来越高,不可避免的用到PNG图片,PNG分为几种格 式,PNG8 PNG24 PNG32,其中最常用的,也是显示效果和大小比较适中的则是PNG24,支持半透明,透明,颜色也非常丰富,但由于咱们国人使用IE系列或以IE为内核 系列的浏览器占大多数,并且由于 WINDOWS XP在国内市场份额比较大,并且XP上好多人还在用IE6 IE7 IE8等浏览器,而这些浏览器对于PNG支持或多或少都有差距,IE6完全不支持PNG,IE7 IE8支持PNG不完全,在IE7 IE8下面对图片改变透明图的时候,延PNG透明区域的地方会有一条黑色的边框,如果有半透明的,则整个半透明区域都是黑色,这点对于要求美观的页面是不 能接受的,研究了下,发现把PNG当背景,用微软特有的滤镜加载图片,可以解决IE6不支持PNG的问题,并且也可以解决IE7 和IE8下面使用JQUERY动画透明效果时出现黑边的问题,有代码有真像,如下
Javascript代码
在页面的/body的结束标记之前先引用jquery1.8类库,再加入以上代码,IE6 7 8 显示PNG24都没有问题了,如果需要执行animate动画或获取图片时,发现在ie 6 7 8下找不到PNG图片了,或找到了改变其位置和透明图没有反应,这原因是correctPNG将页面上所有的PNG的IMG标签都替换成了SPAN标签,然后在SPAN标签上使用filter : progid:DXImageTransform.Microsoft.AlphaImageLoader 将PNG图片加载进来,所以,建议做法是在将图片用DIV包括起来,此DIV中只允许有一个IMG标签,然后对DIV进行位置或透明度的相关操作,例:
还有一种情况是,我对这个图片除了要做透明和位移,还要改变其宽度和高度,对于这种情况,我建议采用以下方法
有问题欢迎共同探讨
\\
明河这里所说的bug不是指IE6无法显示png的问题(鄙视下百度,搜索出来的结果大半是重复,而且还不对题,结果google一下,找到问题所在了),而是
在IE7和IE8下如果你动态修改png图片的透明度,比如说你应用一个fadeIn,将图片的透明度调到25%,这时候就会出现非常诡异的bug,png的透明信息没了!变成了非常难看的黑色!
这个bug不常见,我也是前几天在写shareList — jquery收藏&分享插件时遇到了,bug出在shareList阴影部分,如下图:
再来看火狐下面的效果:
通过二图对比,就可以很明显的发现这个bug的严重性,极度影响美观。
那有没有什么办法可以解决这个bug呢,毕竟动态修改png图片的透明度,有时还是会用到的,接下来就来看解决方案。
IE7和IE8下png图片背景变黑的bug解决方案
1、不要直接改变图片的透明度,而是给图片套个容器,去修改这个容器的透明度
比如原代码是:
<img src="style/images/icon-shadow.png" class="share-list-icon-shadow" />
修改成
<div class="share-list-icon-shadow"><img src="style/images/icon-shadow.png" /></div>
2、给这个容器加个背景颜色
非常重要,解决bug的关键就在这一步,比如:
.share-list-icon-shadow{
width:60px;height:21px;
position:absolute;bottom:8px;left:0px;z-index: 1;
margin: 0 auto;
display:block;
background:#FAFDEF;
}
一般情况下,到此bug就解决了,如果还是有问题,请看下面:
3、给容器加个zoom: 1
zoom: 1起到什么作用呢?为什么IE会存在这个bug呢?
这是二个问题,其实是一个答案。
IE修改透明度,不是通过css属性,而是通过filter滤镜,所以想要理解这个bug,就要从filter滤镜上找原因。
filter作用于一个对象时,这个对象必须是有形体,也就是必须是layout,而IE存在一个很特殊的属性:hasLayout ,这个属性可以赋予容器成layout,hasLayout这个属性有些诡异,你无法通过直接写css启动,而必须通过javascript启动,其实还有一种方法可以启动,就是使用特殊的css属性,变相将hasLayout启动,这个css属性就是 zoom (其他的属性比如display:inline-block、float:left等也行,而只有zoom没什么副作用)
\\最后
jQuery 淡入淡出有png图的时候 ie8下有黑色边框
jQuery fadeTo 时ie8 png图片有黑色边框
往带有png图的样式里加 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true);
例如:.imageContainer img{display:block;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true);}
ie8下jquery改变PNG的opacity出现黑边的更多相关文章
- ie8下jquery改变PNG的opacity出现黑边,ie6下png透明解决办法
目前互联网对于网页效果要求越来越高,不可避免的用到PNG图片,PNG分为几种格 式,PNG8 PNG24 PNG32,其中最常用的,也是显示效果和大小比较适中的则是PNG24,支持半透明,透明,颜色也 ...
- IE8下jQuery改变png图片透明度时出现的黑边问题
png24格式的图片在用jQuery添加显示隐藏动画时发现,图片的半透明区域出现黑边? 在网上搜了搜主要有以下几种办法: 1.把图片保存成PNG-8格式. 2.把背景色一起切入并保存为JPG格式. 以 ...
- IE8下JQuery clone 出的select元素使用append添加option异常解决记录
遇到一个怪现象,由于配置参数是多实例的, 故采用JQuery对模板HTML代码进行clone, HTML代码中包括select标签, 在克隆之后需要对select进行添加option. 在firefo ...
- ie8下jquery读取当前点击的标签位置错误,原因是里面有内容写了text-indent:-9999px
今天写一地图的效果,鼠标点击对应的区域,弹出所点击区域的名字. 因为设计的区域名字有特殊效果,所以,在点击区域里面套了个标签写上区域名字用来识别,但是这个文字呢不同显示在页面上,所以就给 em 加个了 ...
- jQuery的animate方法在IE8下出现小问题
今天修改网站的bug,把网页显示的几张图片给做成左右滑动的动画效果: 由于本身有一个demo可供参考,然后在此基础上进行修改,所以很快就搞定了,然后在chrome,firefox,IE9下分别进行测试 ...
- jquery.validate.js在IE8下报错不运行
因为项目要表单验证,所以特意去找了jquery.validate这个应该是jquery官方团队出品的表单验证插件. 实际应用时,却在IE8调试时碰到了问题. 从jquery.validate官网下载了 ...
- 解决IE8下opacity属性失效问题
由于opacity属性存在兼容性问题,所以在IE8下,用opacity来设置元素的透明度,会失效,从而导致页面的样式问题. 在IE8及其更早的浏览器下,我们可以使用filter属性,来代替opacit ...
- 解决IE8下opacity属性失效问题,无法隐藏元素
解决IE8下opacity属性失效问题 由于opacity属性存在兼容性问题,所以在IE8下,用opacity来设置元素的透明度,会失效,从而导致页面的样式问题.在IE8及其更早的浏览器下,我们可 ...
- jquery on事件在IE8下失效的一种情况,及解决方法/bootstrap空间绑定控件事件不好用
同事在复制bootstrap中的select控件之后,发现用$('.selectpicker').selectpicker();刷新下拉框控件不好使,后来发现是用原生js克隆的方法obj.cloneN ...
随机推荐
- C++学习之 类
1.类规范 类声明:包括数据成员.成员函数(共有接口)的声明 类方法定义 C++程序员将接口(类)放在头文件中,将实现放在源代码文件中 类设计尽量将共有接口和实现细节分开,数据隐藏(将数据放在私有部分 ...
- 说说 Python 的变量以及简单数据类型
1 变量 先来看一个示例: news="我国第一个人工智能规划问世"print(news) 运行结果: 可以看出使用 Python 定义变量很简单,甚至都不需要指定变量的类型. 1 ...
- Vue 路由详解
Vue 路由详解 对于前端来说,其实浏览器配合超级连接就很好的实现了路由功能.但是对于单页面应用来说,浏览器和超级连接的跳转方式已经不能适用,所以各大框架纷纷给出了单页面应用的解决路由跳转的方案. V ...
- 实验作业:使gdb跟踪分析一个系统调用内核函数
实验作业:使gdb跟踪分析一个系统调用内核函数(我使用的是getuid) 20135313吴子怡.北京电子科技学院 [第一部分] 根据视频演示的步骤,先做第一部分,步骤如下 ①更新menu代码到最新版 ...
- vs2013的安装及测试(第三周)
1.打开同学给的安装包,发现如下问题: 2.因为是win7,提示需安装IE10.因为安装IE10必须要在安装好 server pack 1的情况下,所以从官方网站上下载好server pack 1,并 ...
- DHCP分配固定IP
https://www.cnblogs.com/liu1026/p/9829337.html 按照上面的操作实验好后在DHCP服务端的配置文件中加入
- File类操作文件
简单示例: public static void main(String[] args) { // 列出系统所有的根路径 File[] listRoots = File.listRoots(); fo ...
- Xcode常见设置
1.设置主题和字体大小
- FileReader & Blob & File
FileReader & Blob & File https://developer.mozilla.org/en-US/docs/Web/API/FileReader https:/ ...
- 学习官方示例 - TForm.BorderIcons
本例用一行代码禁用了最大化按钮. unit Unit1; interface uses Windows, Messages, SysUtils, Variants, Classes, Graphi ...