VML编程之------image图片《VML极道教程》原著:沐缘华

最新推荐文章于 2009-06-27 17:37:00 发布
最新推荐文章于 2009-06-27 17:37:00 发布
阅读量1.2k 收藏
点赞数
分类专栏： VML编程 文章标签： 编程 image filter behavior null html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/GeneralXCK/article/details/5351091
版权 
1:image图片 - 专用属性

 
 
属性名默认值值类型/范围用途
srcnullURLtext描述图像URL地址来源
grayscalefalseboolean描述图像是否为黑白效果
bilevelfalseboolean描述图像是否为漫画卡通效果
blacklevelnullnumber/-0.4-0.4描述图像亮度
gainnullnumber/0-100描述图像对比度
gammanullnumber/0.9-0.1描述图像颜色清晰度
chromakeynonecolortext描述图像透明过滤的颜色
cropleftnullnumber/0%-100%描述图像左边的裁剪
croprightnullnumber/0%-100%描述图像右边的裁剪
croptopnullnumber/0%-100%描述图像上边的裁剪
cropbottomnullnumber/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"/>
  
  

 
 


 
 

  
  
  
  
 
 

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;"/>
  
  

 
 


 
 

  
  
  
  
 
 

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;"/>
  
  

 
 


 
 

  
  
  
  
 
 

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;"/>
  
  

 
 


 
 

  
  
  
  
 
 

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;"/>
  
  

 
 


 
 

  
  
  
  
 
 

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)"/>
GeneralXCK
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
VML极道教程 VML极道教程
01-12
学习VML的很好的教程，介绍很全面，希望对大家有用。
VML编程之------background背景《VML极道教程》原著:沐缘华
weixin_30715523的博客
05-29 116
《VML极道教程》原著:沐缘华1章15节:background背景 1:background背景 - 详解 你也许一直在好奇，《VML极道教程》内容页面的黄、白相交的渐变背景是怎么做的？其实非常简单、我们本章节所讲的background(网页背景控制标记)，就是用来完成这项任务的。 在说明具体怎么做之前，请先对比以下几例的代码区别、勿需死记！ 平行渐变填充的例子: <HTML...
VML极道教程(一) VML介绍
旺仔专栏
06-27 7850
本系列文章导航VML极道教程(一) VML介绍 VML极道教程(二) VML入门VML极道教程(三) 标记实战与line线VML极道教程(四) oval圆rect矩型VML极道教程(五) RoundRect圆矩型VML极道教程(六) image图片VML极道教程(七) polyline多边型VML极道教程(八) shape多边型.shapetype模版.shape与
VML编程之------VML语言入门《VML极道教程》原著:沐缘华
GeneralXCK的专栏
05-27 1192
《VML极道教程》原著:沐缘华1章4节:VML语言入门 1:VML语言入门 - 极道学法在我正式开始讲解、你正式开始学习VML语言以前，请务必遵循以下规则，可以达到最佳效果、极道学习方法。1:如果你学过HTML、CSS或精通HTML、CSS，那么建议你把学VML的过程看做跟学HTML的过程是一样的，因为，根本就是大同小异。2:从本章节和本章节以后的每一个章节，我会
VML极道教程
10-09
非常详细的介绍了VML从入门到精通的一些技巧，很值得研究，并非原创，也是自己收集过来的而已，但很值得分享
example-gradients:在HTML电子邮件中使用CSS背景渐变，并为Outlook使用VML后备
05-13
范本包括2个示例： -在模板内的元素上使用渐变-身体背景渐变兼容性模板使用CSS background-image线性渐变以及Outlook的VML后备功能，这意味着它可以在所有电子邮件客户端的87％以上使用（可能甚至更多，Mac的许多...
svg-to-vml-with-trifleJS
06-18
svg-to-vml-with-trifleJS $ bin\triflejs.exe convert.js example --emulate=IE8 或者$ npm install && grunt
vtex-snippets:该项目旨在拥有一组用于创建 VTEX IO Store 框架的 Snippets 和快捷方式
08-05
VTEX IO 片段一个可以更快地创建 VTEX IO 存储的 vscode :rocket: :light_bulb: 关于该项目该项目旨在拥有一组用于创建的 ...VTEX Info Card vsl→ VTEX Store Link vml→ VTEX Modal Layout vsf→ VTEX Store Fo
flot-7.zip_FlashVml_Flot
09-21
很好很强大，中文教程丰富，网也会图表，曲线的js脚本
VML Map Browser-开源
04-27
一个基于html，php，vml，jvascript和mysql数据库的，将具有属性的mapinfo MIF文件发布到Web的Web工具。
vml技术大全（中文手册，极道教程，入门教程及大量实例等）
01-19
vml技术大全（中文手册，极道教程，入门教程及大量实例等） 作者精心整理成word文档，所有实例均有效果图及源码，欢迎收藏 包括一些常用的IE绘图源码
VML极道教程(IE打开)
03-11
VML极道教程VML极道教程VML极道教程VML极道教程VML极道教程VML极道教程
VML极道教程 vml学习
03-08
自己学习vml时用的教程，属于入门级的，好东西分享一下
vml 极道教程 详细的vml教程
01-17
不错的vml教程，内容比较详细，还包括dvml flashvml相关知识
vml极道教程经典教程
08-29
详细讲述VML标记还有一些实例，本教程讲述的非常详细欢迎下载阅读。
VML图片编辑插件（画图）
01-27
附件中有三个页面： vml.htm（vml功能页面，已修改，默认加载了一张图片，在此基础上修改。然后点保存异步保存新生成的图片页面代码） vml_all.htm （完整的vml功能页面） DoAjax.aspx （服务器端接收异步传输来的HTML代码，可以保存到数据库或在服务器端创建一个html文件，以实现数据持久化）
VML+HTML实现流程图查看
11-23
实现了vml+html中显示的，并解决了ie浏览器兼容的问题，代码直接运行便好用
前端 <v:imagedata src="file:///C:/Users/PC/AppData/Local/Temp/msohtmlclip1/01/clip_image001.png" o:title=""/> </v:shape><![endif]--><!-- [if !vml]--><img src="file:///C:/Users/PC/AppData/Local/Temp/msohtmlclip1/01/clip_image002.jpg" width="623" height="443" /><!--[endif]--></span></p>截取所有src="file:///C:/Users/PC/AppData/Local/Temp/msohtmlclip1/的字符串
最新发布
06-13
可以使用正则表达式来匹配符合要求的子字符串，然后使用字符串的 `match()` 方法或者正则表达式的 `exec()` 方法来获取匹配的结果。 例如，以下是使用 `match()` 方法实现的代码： ```javascript const str = '<v:imagedata src="file:///C:/Users/PC/AppData/Local/Temp/msohtmlclip1/01/clip_image001.png" o:title=""/> </v:shape><![endif]--><!-- [if !vml]--><img src="file:///C:/Users/PC/AppData/Local/Temp/msohtmlclip1/01/clip_image002.jpg" width="623" height="443" /><!--[endif]--></span></p>'; const regex = /src="file:\/\/\/C:\/Users\/PC\/AppData\/Local\/Temp\/msohtmlclip1\//g; const matches = str.match(regex); console.log(matches); // ['src="file:///C:/Users/PC/AppData/Local/Temp/msohtmlclip1/', 'src="file:///C:/Users/PC/AppData/Local/Temp/msohtmlclip1/'] ``` 上述正则表达式使用了转义字符 `\` 来匹配 `file:///C:/Users/PC/AppData/Local/Temp/msohtmlclip1/` 字符串，使用 `g` 参数来匹配所有符合要求的子字符串。 注意，此处的 `match()` 方法返回的是一个数组，包含了所有匹配的结果。如果没有匹配到任何结果，返回的是 `null`。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值