zoukankan      html  css  js  c++  java
  • IE下PNG透明图片fadeIn出现黑边的问题

    工作上有需求,做网站首页的幻灯。

    图片使用的是PNG32透明图片,效果使用了jQuery的fadeIn & fadeOut

    fadeIn Out是使用改变opacity的值来达到淡入淡出的效果。

    但是这种效果在IE下这种对PNG支持存在问题的浏览器下,在淡入淡出的瞬间,图片内容的边缘就会出现一块黑色的区域。

    特别的难看。

    经过搜索和尝试最终得到解决方案。

    首先,由于之前大图使用的是IMG标签,先改成把图片当成DIV的背景图。

    设置好DIV的高宽,然后设置inline-style

    style='background:url(your.png);background:none;*background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="your.png", sizingMethod="crop");'

    主要是要将ie6-8的background设置成none;

    background:none;  为ie8的hack。

    *background:none;   为ie6的hack。

    然后使用滤镜,就可以搞定了。

    //=====================================================

    另外,还有其他的解决方法:

    1. 换图片,换成JPG的。如果是有背景的话,在图片位置固定的情况下,把背景一并切下来吧;

    2. 不要使用fadeIn Out效果,show & hide 就没这事。

    3. 使用flash制作幻灯,成本可以在前期预估,成熟的幻灯程序也应该有不少。

  • 相关阅读:
    js实现图片轮播(修改版1)
    动态添加内容到滚动区域
    新闻自动滚动
    多媒体对象(Media Object)
    (Py练习)判断能被几个9整除
    (Py练习)输出乘法口诀表
    (Py练习)输入某年某月判断天数
    文件名称批量修改
    续订Jetbrain学生包
    (Py练习)判断101-200之间的素数个数并输出
  • 原文地址:https://www.cnblogs.com/leftice/p/3318415.html
Copyright © 2011-2022 走看看