VML极道教程(六) image图片
本系列文章导航
VML极道教程(八) shape多边型.shapetype模版.shape与curve曲线
VML极道教程(十) group集合容器.vmlframe图形引用
VML极道教程(十一) 2级标记stroke边框，shadow阴影
image图片
1:image图片 - 专用属性
| 属性名 | 默认值 | 值类型/范围 | 用途 |
| src | null | URLtext | 描述图像URL地址来源 |
| grayscale | false | boolean | 描述图像是否为黑白效果 |
| bilevel | false | boolean | 描述图像是否为漫画卡通效果 |
| blacklevel | null | number/-0.4-0.4 | 描述图像亮度 |
| gain | null | number/0-100 | 描述图像对比度 |
| gamma | null | number/0.9-0.1 | 描述图像颜色清晰度 |
| chromakey | none | colortext | 描述图像透明过滤的颜色 |
| cropleft | null | number/0%-100% | 描述图像左边的裁剪 |
| cropright | null | number/0%-100% | 描述图像右边的裁剪 |
| croptop | null | number/0%-100% | 描述图像上边的裁剪 |
| cropbottom | null | number/0%-100% | 描述图像下边的裁剪 |
2:image图片 - 插入图像、与图像处理
<HTML xmlns:v><STYLE>v/:*{behavior:url(#default#VML);}</STYLE><BODY>
<v:image src="shili/fyw2.jpg" style="Z-INDEX:1;LEFT:10;WIDTH:100;POSITION:absolute;TOP:10;HEIGHT:100"/>
<v:image grayscale=true src="shili/fyw2.jpg" style="Z-INDEX:1;LEFT:110;WIDTH:100;POSITION:absolute;TOP:10;HEIGHT:100"/>
<v:image bilevel=t src="shili/fyw2.jpg" style="Z-INDEX:1;LEFT:210;WIDTH:100;POSITION:absolute;TOP:10;HEIGHT:100"/>
<v:image blacklevel=-0.05 src="shili/fyw2.jpg" style="Z-INDEX:1;LEFT:10;WIDTH:100;POSITION:absolute;TOP:120;HEIGHT:100"/>
<v:image blacklevel=0.1 src="shili/fyw2.jpg" style="Z-INDEX:1;LEFT:110;WIDTH:100;POSITION:absolute;TOP:120;HEIGHT:100"/>
<v:image gain=2 src="shili/fyw2.jpg" style="Z-INDEX:1;LEFT:210;WIDTH:100;POSITION:absolute;TOP:120;HEIGHT:100"/>
<v:image gain=10 src="shili/fyw2.jpg" style="Z-INDEX:1;LEFT:310;WIDTH:100;POSITION:absolute;TOP:120;HEIGHT:100"/>
<v:image gamma=0.8 src="shili/fyw2.jpg" style="Z-INDEX:1;LEFT:410;WIDTH:100;POSITION:absolute;TOP:120;HEIGHT:100"/>
<v:image gamma=0.2 src="shili/fyw2.jpg" style="Z-INDEX:1;LEFT:510;WIDTH:100;POSITION:absolute;TOP:120;HEIGHT:100"/>
<v:image src="shili/fyw2.jpg" style="Z-INDEX:1;LEFT:10;WIDTH:100;POSITION:absolute;TOP:10;HEIGHT:100"/>
<v:image grayscale=true src="shili/fyw2.jpg" style="Z-INDEX:1;LEFT:110;WIDTH:100;POSITION:absolute;TOP:10;HEIGHT:100"/>
<v:image bilevel=t src="shili/fyw2.jpg" style="Z-INDEX:1;LEFT:210;WIDTH:100;POSITION:absolute;TOP:10;HEIGHT:100"/>
<v:image blacklevel=-0.05 src="shili/fyw2.jpg" style="Z-INDEX:1;LEFT:10;WIDTH:100;POSITION:absolute;TOP:120;HEIGHT:100"/>
<v:image blacklevel=0.1 src="shili/fyw2.jpg" style="Z-INDEX:1;LEFT:110;WIDTH:100;POSITION:absolute;TOP:120;HEIGHT:100"/>
<v:image gain=2 src="shili/fyw2.jpg" style="Z-INDEX:1;LEFT:210;WIDTH:100;POSITION:absolute;TOP:120;HEIGHT:100"/>
<v:image gain=10 src="shili/fyw2.jpg" style="Z-INDEX:1;LEFT:310;WIDTH:100;POSITION:absolute;TOP:120;HEIGHT:100"/>
<v:image gamma=0.8 src="shili/fyw2.jpg" style="Z-INDEX:1;LEFT:410;WIDTH:100;POSITION:absolute;TOP:120;HEIGHT:100"/>
<v:image gamma=0.2 src="shili/fyw2.jpg" style="Z-INDEX:1;LEFT:510;WIDTH:100;POSITION:absolute;TOP:120;HEIGHT:100"/>
3:image图片 - 图像矢量化、与正常大小
<HTML xmlns:v><STYLE>v/:*{behavior:url(#default#VML);}</STYLE><BODY>
<v:image src="shili/fyw2.jpg" style="Z-INDEX:1;LEFT:10;WIDTH:450;HEIGHT:300;POSITION:absolute;TOP:10;"/>
<v:image src="shili/fyw2.jpg" style="Z-INDEX:1;LEFT:10;WIDTH:234;HEIGHT:174;POSITION:absolute;TOP:320;"/>
<v:image src="shili/fyw2.jpg" style="Z-INDEX:1;LEFT:10;WIDTH:450;HEIGHT:300;POSITION:absolute;TOP:10;"/>
<v:image src="shili/fyw2.jpg" style="Z-INDEX:1;LEFT:10;WIDTH:234;HEIGHT:174;POSITION:absolute;TOP:320;"/>
4:image图片 - 颜色遮蔽
<HTML xmlns:v><STYLE>v/:*{behavior:url(#default#VML);}</STYLE><BODY bgcolor=black>
<v:image chromakey="white" src="shili/fyw2.jpg" style="Z-INDEX:1;LEFT:10;WIDTH:450;HEIGHT:300;POSITION:absolute;TOP:10;"/>
<v:image chromakey="white" src="shili/fyw2.jpg" style="Z-INDEX:1;LEFT:10;WIDTH:450;HEIGHT:300;POSITION:absolute;TOP:10;"/>
chromakey="white"其中的white是白色，表示图像所有的白色变成透明
5:image图片 - 默认动画的支持、与处理后不在支持
<HTML xmlns:v><STYLE>v/:*{behavior:url(#default#VML);}</STYLE><BODY>
<v:image src="shili/haha.gif" style="Z-INDEX:1;LEFT:10;WIDTH:450;HEIGHT:300;POSITION:absolute;TOP:10;"/>
<v:image bilevel=t src="shili/haha.gif" style="Z-INDEX:1;LEFT:10;WIDTH:450;HEIGHT:300;POSITION:absolute;TOP:320;"/>
<v:image src="shili/haha.gif" style="Z-INDEX:1;LEFT:10;WIDTH:450;HEIGHT:300;POSITION:absolute;TOP:10;"/>
<v:image bilevel=t src="shili/haha.gif" style="Z-INDEX:1;LEFT:10;WIDTH:450;HEIGHT:300;POSITION:absolute;TOP:320;"/>
6:image图片 - 裁剪后，依然对比矢量化宽度、高度
<HTML xmlns:v><STYLE>v/:*{behavior:url(#default#VML);}</STYLE><BODY>
<v:image cropleft="20%" cropright="" croptop="" cropbottom="40%" src="shili/haha.gif" style="Z-INDEX:1;LEFT:10;WIDTH:450;HEIGHT:300;POSITION:absolute;TOP:10;"/>
<v:image cropleft="20%" cropright="" croptop="" cropbottom="40%" src="shili/haha.gif" style="Z-INDEX:1;LEFT:10;WIDTH:450;HEIGHT:300;POSITION:absolute;TOP:10;"/>
7:image图片 - CSS滤镜、VML旋转充分支持
<HTML xmlns:v><STYLE>v/:*{behavior:url(#default#VML);}</STYLE><BODY>
<v:image src="shili/fyw2.jpg" style="filter:xray;Z-INDEX:1;LEFT:10;WIDTH:100;POSITION:absolute;TOP:10;HEIGHT:100"/>
<v:image src="shili/fyw2.jpg" style="filter:invert;Z-INDEX:1;LEFT:110;WIDTH:100;POSITION:absolute;TOP:10;HEIGHT:100"/>
<v:image src="shili/fyw2.jpg" style="filter:gray;Z-INDEX:1;LEFT:210;WIDTH:100;POSITION:absolute;TOP:10;HEIGHT:100"/>
<v:image src="shili/fyw2.jpg" style="filter:fliph;Z-INDEX:1;LEFT:310;WIDTH:100;POSITION:absolute;TOP:10;HEIGHT:100"/>
<v:image src="shili/fyw2.jpg" style="filter:flipv;Z-INDEX:1;LEFT:410;WIDTH:100;POSITION:absolute;TOP:10;HEIGHT:100"/>
<v:image src="shili/fyw2.jpg" style="rotation:220;Z-INDEX:1;LEFT:510;WIDTH:100;POSITION:absolute;TOP:10;HEIGHT:100"/>
<v:image src="shili/fyw2.jpg" style="filter:alpha(opacity=80);Z-INDEX:1;LEFT:10;WIDTH:100;POSITION:absolute;TOP:120;HEIGHT:100"/>
<v:image src="shili/fyw2.jpg" style="filter:alpha(opacity=80,style=1);Z-INDEX:1;LEFT:110;WIDTH:100;POSITION:absolute;TOP:120;HEIGHT:100"/>
<v:image src="shili/fyw2.jpg" style="filter:alpha(opacity=80,style=2);Z-INDEX:1;LEFT:210;WIDTH:100;POSITION:absolute;TOP:120;HEIGHT:100"/>
<v:image src="shili/fyw2.jpg" style="filter:alpha(opacity=80,style=3);Z-INDEX:1;LEFT:310;WIDTH:100;POSITION:absolute;TOP:120;HEIGHT:100"/>
<v:image src="shili/fyw2.jpg" style="filter:blur(add=0,direction=14,strength=15);Z-INDEX:1;LEFT:410;WIDTH:100;POSITION:absolute;TOP:120;HEIGHT:100"/>
<v:image src="shili/fyw2.jpg" style="filter:wave(add=0,freq=,lightstrength=5,phase=5,strength=5);Z-INDEX:1;LEFT:510;WIDTH:100;POSITION:absolute;TOP:120;HEIGHT:100"/>
<v:image src="shili/haha.gif" style="filter:shadow(color=green,direction=15);Z-INDEX:1;LEFT:10;WIDTH:100;POSITION:absolute;TOP:230;HEIGHT:100"/>
<v:image src="shili/haha.gif" style="filter:dropshadow(color=navy,offx=5,offy=5,positive=5);Z-INDEX:1;LEFT:110;WIDTH:100;POSITION:absolute;TOP:230;HEIGHT:100"/>
<v:image src="shili/haha.gif" style="filter:glow(color=red,strength=5);Z-INDEX:1;LEFT:210;WIDTH:100;POSITION:absolute;TOP:230;HEIGHT:100"/>
<v:image src="shili/haha.gif" style="filter:progid:DXImageTransform.Microsoft.Emboss(Bias=0.7);Z-INDEX:1;LEFT:310;WIDTH:100;POSITION:absolute;TOP:230;HEIGHT:100"/>
<v:image src="shili/haha.gif" style="filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#5500FF,endColorstr=#55FF00,GradientType=1);Z-INDEX:1;LEFT:410;WIDTH:100;POSITION:absolute;TOP:230;HEIGHT:100"/>
<v:image src="shili/haha.gif" style="filter:progid:DXImageTransform.Microsoft.Matrix(SizingMethod=auto expand,FilterType=bilinear,Dx=0,Dy=0,M11=0.5,M12=0.6,M21=0,M22=1);Z-INDEX:1;LEFT:510;WIDTH:100;POSITION:absolute;TOP:230;HEIGHT:100"/>
<v:oval style="Z-INDEX:1;LEFT:10;WIDTH:200;POSITION:absolute;TOP:340;HEIGHT:150;"/>
<v:oval style="Z-INDEX:1;LEFT:220;WIDTH:200;POSITION:absolute;TOP:340;HEIGHT:150;filter:wave(add=0,freq=,lightstrength=5,phase=5,strength=15)"/>
<v:oval style="Z-INDEX:1;LEFT:430;WIDTH:200;POSITION:absolute;TOP:340;HEIGHT:150;filter:progid:DXImageTransform.Microsoft.Engrave(Bias=-0.7)"/>
博文来源：http://www.cnblogs.com/GeneralXU/archive/2007/05/29/763230.html
<v:image src="shili/fyw2.jpg" style="filter:xray;Z-INDEX:1;LEFT:10;WIDTH:100;POSITION:absolute;TOP:10;HEIGHT:100"/>
<v:image src="shili/fyw2.jpg" style="filter:invert;Z-INDEX:1;LEFT:110;WIDTH:100;POSITION:absolute;TOP:10;HEIGHT:100"/>
<v:image src="shili/fyw2.jpg" style="filter:gray;Z-INDEX:1;LEFT:210;WIDTH:100;POSITION:absolute;TOP:10;HEIGHT:100"/>
<v:image src="shili/fyw2.jpg" style="filter:fliph;Z-INDEX:1;LEFT:310;WIDTH:100;POSITION:absolute;TOP:10;HEIGHT:100"/>
<v:image src="shili/fyw2.jpg" style="filter:flipv;Z-INDEX:1;LEFT:410;WIDTH:100;POSITION:absolute;TOP:10;HEIGHT:100"/>
<v:image src="shili/fyw2.jpg" style="rotation:220;Z-INDEX:1;LEFT:510;WIDTH:100;POSITION:absolute;TOP:10;HEIGHT:100"/>
<v:image src="shili/fyw2.jpg" style="filter:alpha(opacity=80);Z-INDEX:1;LEFT:10;WIDTH:100;POSITION:absolute;TOP:120;HEIGHT:100"/>
<v:image src="shili/fyw2.jpg" style="filter:alpha(opacity=80,style=1);Z-INDEX:1;LEFT:110;WIDTH:100;POSITION:absolute;TOP:120;HEIGHT:100"/>
<v:image src="shili/fyw2.jpg" style="filter:alpha(opacity=80,style=2);Z-INDEX:1;LEFT:210;WIDTH:100;POSITION:absolute;TOP:120;HEIGHT:100"/>
<v:image src="shili/fyw2.jpg" style="filter:alpha(opacity=80,style=3);Z-INDEX:1;LEFT:310;WIDTH:100;POSITION:absolute;TOP:120;HEIGHT:100"/>
<v:image src="shili/fyw2.jpg" style="filter:blur(add=0,direction=14,strength=15);Z-INDEX:1;LEFT:410;WIDTH:100;POSITION:absolute;TOP:120;HEIGHT:100"/>
<v:image src="shili/fyw2.jpg" style="filter:wave(add=0,freq=,lightstrength=5,phase=5,strength=5);Z-INDEX:1;LEFT:510;WIDTH:100;POSITION:absolute;TOP:120;HEIGHT:100"/>
<v:image src="shili/haha.gif" style="filter:shadow(color=green,direction=15);Z-INDEX:1;LEFT:10;WIDTH:100;POSITION:absolute;TOP:230;HEIGHT:100"/>
<v:image src="shili/haha.gif" style="filter:dropshadow(color=navy,offx=5,offy=5,positive=5);Z-INDEX:1;LEFT:110;WIDTH:100;POSITION:absolute;TOP:230;HEIGHT:100"/>
<v:image src="shili/haha.gif" style="filter:glow(color=red,strength=5);Z-INDEX:1;LEFT:210;WIDTH:100;POSITION:absolute;TOP:230;HEIGHT:100"/>
<v:image src="shili/haha.gif" style="filter:progid:DXImageTransform.Microsoft.Emboss(Bias=0.7);Z-INDEX:1;LEFT:310;WIDTH:100;POSITION:absolute;TOP:230;HEIGHT:100"/>
<v:image src="shili/haha.gif" style="filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#5500FF,endColorstr=#55FF00,GradientType=1);Z-INDEX:1;LEFT:410;WIDTH:100;POSITION:absolute;TOP:230;HEIGHT:100"/>
<v:image src="shili/haha.gif" style="filter:progid:DXImageTransform.Microsoft.Matrix(SizingMethod=auto expand,FilterType=bilinear,Dx=0,Dy=0,M11=0.5,M12=0.6,M21=0,M22=1);Z-INDEX:1;LEFT:510;WIDTH:100;POSITION:absolute;TOP:230;HEIGHT:100"/>
<v:oval style="Z-INDEX:1;LEFT:10;WIDTH:200;POSITION:absolute;TOP:340;HEIGHT:150;"/>
<v:oval style="Z-INDEX:1;LEFT:220;WIDTH:200;POSITION:absolute;TOP:340;HEIGHT:150;filter:wave(add=0,freq=,lightstrength=5,phase=5,strength=15)"/>
<v:oval style="Z-INDEX:1;LEFT:430;WIDTH:200;POSITION:absolute;TOP:340;HEIGHT:150;filter:progid:DXImageTransform.Microsoft.Engrave(Bias=-0.7)"/>
博文来源：http://www.cnblogs.com/GeneralXU/archive/2007/05/29/763230.html