做网站建设时应该经常需要对图片进行缩小，在IE6.0和IE7.0下图片缩小后会出现锯齿，非常难看。Firefox、chorme、IE8.0等浏览器则不存在这个问题， 天生就可以对缩放的图片进行柔化。其中IE7.0可以用-ms-interpolation-mode:bicubic; 来解决，不过这是IE7的私有属性。IE6.0则必须使用VML滤镜才能解决这个问题。
VML简介 VML的全称是Vector Markup Language(矢量标记语言)，矢量的图形，意味着图形可以任意放大缩小而不损失图形的质量。VML是微软1999年9月附带IE5.0发布的，故只有IE5.0以上版本对VML提供支持。
操作步骤 - 处理需要使用的图片；
- 页面增加命名空间<htmlxmlns:v="urn:schemas-microsoft-com:vml">
- 增加CSS样式 v\:image{behavior:url(#default#VML);width:128px;height:128px;cursor:hand}
- 应用CSS样式：<v:imagesrc="http://www./png/phuzion/home.png" />
- 预览即可。
源代码 <html xmlns:v="urn:schemas-microsoft-com:vml"> v\:* { behavior: url(#default#VML);} img{width:128px;height:128px;display:block;} img.thumb{-ms-interpolation-mode: bicubic;} <v:image src="http://www./png/phuzion/home.png" style="width:128px;height:128px;display:block"/> <img src="http://www./png/phuzion/home.png" /> <img src="http://www./png/phuzion/home.png" class="thumb" />
效果预览下面是在IE6.0下分别使用三种不同方法的效果截图：原始图片是一张256*256px的png格式的图片，从图中可以看出，使用Bicubic在IE6.0下仍然还有很明显的锯齿，使用VML缩小的图片则非常清晰，并且还解决了在IE6.0下png图片的灰色背景问题。
注意事项 - 使用v:image，所以需要 xmlns:v="urn:schemas-microsoft-com:vml";
- v:image必须指定width和height,且display:block;
- 非IE浏览器不支持;
- 只对同网站的图片有效。对IE6动态跨域名的图片失真依然无效；
- 不支持getElementsByName以及getElementsByTagName获取dom,通过ID可以。
|
