ie兼容图片缩小后模糊失真(锯齿)问题

解决IE下图片缩小失真(有锯齿)的问题

 

首先,这不是一个新鲜玩意儿,很多大牛08年就发现了。

其次,这是个所有IE下普遍都会遇到的问题,而非只针对于IE67。(百度了一下,大半左右的文章是针对于IE67的)。自己为什么不能试一下呢?为什么不能实事求是,实话实说呢?

先说一下:-ms-interpolation-mode:bicubic 为IE7私有属性

interpolation

[ ɪnˌtəpəʊˈleɪʃən ][ ɪnˌtɚpəˈleʃən ]

n. 窜改; 添写,插补

 

bicubic

双三次

 

再说一下:VML滤镜。

VML介绍

VML的全称是Vector Markup Language(矢量标记语言),矢量的图形,意味着图形可以任意放大缩小而不损失图形的质量。VML是微软1999年9月附带IE5.0发布的,故只有IE5.0以上版本对VML提供支持。

 

操作步骤

  1. 页面增加命名空间

  2. 增加CSS样式,如:

    v\:image{behavior:url(#default#VML);width:128px;height:128px;}

  3. 应用CSS样式的DOM,如:

源代码参考






无标题文档








注意事项

  • 使用v:image,所以需要xmlns:v="urn:schemas-microsoft-com:vml";

  • v:image必须指定display:block,否则图片不可见。

  • v\:image必须指定图片宽高,否则图片不可见。
  • 非IE浏览器不支持,图片不可见。

  • 只对同网站的图片有效。对IE6动态跨域名的图片失真依然无效;

  • 不支持getElementsByName以及getElementsByTagName获取dom,通过ID可以。

效果截图:第一幅图为默认样式,第二幅为添加了-ms-interpolation-mode:bicubic,第三幅图为运用了:

IE6,8,9:
ie兼容图片缩小后模糊失真(锯齿)问题_第1张图片

IE7的比较明显:
ie兼容图片缩小后模糊失真(锯齿)问题_第2张图片

可以看出,第一幅图完全有锯齿,第三幅图虽然没有,但是仿佛加上了“ 高斯模糊”效果。只有第二幅图既清晰又无锯齿。

至于火狐,opera将2144*1424的照片缩至900*600是看不出锯齿的,但如果缩至300*200仍然会有。chrome和safari则不存在这个问题,完全绝对清晰平滑。效果同IE7下的第二幅图。

 

转载于:https://www.cnblogs.com/zhouyx/p/4189069.html

你可能感兴趣的:(ie兼容图片缩小后模糊失真(锯齿)问题)