做網(wǎng)站建設(shè)時(shí)應(yīng)該經(jīng)常需要對(duì)圖片進(jìn)行縮小，在IE6.0和IE7.0下圖片縮小后會(huì)出現(xiàn)鋸齒，非常難看。Firefox、chorme、IE8.0等瀏覽器則不存在這個(gè)問題， 天生就可以對(duì)縮放的圖片進(jìn)行柔化。其中IE7.0可以用-ms-interpolation-mode:bicubic; 來解決，不過這是IE7的私有屬性。IE6.0則必須使用VML濾鏡才能解決這個(gè)問題。
VML簡介 VML的全稱是Vector Markup Language(矢量標(biāo)記語言)，矢量的圖形，意味著圖形可以任意放大縮小而不損失圖形的質(zhì)量。VML是微軟1999年9月附帶IE5.0發(fā)布的，故只有IE5.0以上版本對(duì)VML提供支持。
操作步驟 - 處理需要使用的圖片；
- 頁面增加命名空間<htmlxmlns:v="urn:schemas-microsoft-com:vml">
- 增加CSS樣式 v\:image{behavior:url(#default#VML);width:128px;height:128px;cursor:hand}
- 應(yīng)用CSS樣式：<v:imagesrc="http://www./png/phuzion/home.png" />
- 預(yù)覽即可。
源代碼 <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" />
效果預(yù)覽下面是在IE6.0下分別使用三種不同方法的效果截圖：原始圖片是一張256*256px的png格式的圖片，從圖中可以看出，使用Bicubic在IE6.0下仍然還有很明顯的鋸齒，使用VML縮小的圖片則非常清晰，并且還解決了在IE6.0下png圖片的灰色背景問題。
注意事項(xiàng) - 使用v:image，所以需要 xmlns:v="urn:schemas-microsoft-com:vml";
- v:image必須指定width和height,且display:block;
- 非IE瀏覽器不支持;
- 只對(duì)同網(wǎng)站的圖片有效。對(duì)IE6動(dòng)態(tài)跨域名的圖片失真依然無效；
- 不支持getElementsByName以及getElementsByTagName獲取dom,通過ID可以。
|
