css滤镜效果css滤镜
CSS滤镜知识点
CSS滤镜知识点CSS滤镜是一种应用于HTML元素的视觉效果工具，通过改变元素的颜色、亮度、对比度等属性，能够实现各种各样的效果。
在本文中，我们将深入探讨CSS滤镜的相关知识点。
一、CSS滤镜简介CSS滤镜是一系列用于改变HTML元素的呈现方式的特效。
通过对图像或元素应用一系列滤镜效果，我们可以改变其外观和视觉效果，从而创造出更加丰富多样的界面效果。
二、常用的CSS滤镜属性1. filter属性filter属性是应用滤镜效果的关键属性，通过给元素添加filter属性来应用滤镜效果。
具体的滤镜效果是通过filter函数来定义的。
2. blur滤镜blur滤镜用于给元素添加模糊效果。
可以通过设置模糊半径来控制模糊程度，半径越大，模糊程度越高。
3. brightness滤镜brightness滤镜用于调整元素的亮度。
可以通过设置亮度的百分比来控制亮度的变化，例如brightness(150%)表示将元素的亮度增加50%。
4. contrast滤镜contrast滤镜用于调整元素的对比度。
可以通过设置对比度的百分比来控制对比度的变化，例如contrast(200%)表示将元素的对比度增加100%。
5. grayscale滤镜grayscale滤镜用于将元素转换为灰度图像。
可以通过设置灰度的百分比来控制灰度的变化，例如grayscale(50%)表示将元素的灰度程度设置为50%。
6. sepia滤镜sepia滤镜用于将元素转换为复古风格的棕色色调。
可以通过设置棕色的百分比来控制棕色的变化，例如sepia(80%)表示将元素的棕色程度设置为80%。
7. saturate滤镜saturate滤镜用于调整元素的饱和度。
可以通过设置饱和度的百分比来控制饱和度的变化，例如saturate(200%)表示将元素的饱和度增加100%。
8. hue-rotate滤镜hue-rotate滤镜用于旋转元素的色相。
可以通过设置旋转角度来控制色相的变化，例如hue-rotate(90deg)表示将元素的色相顺时针旋转90度。
DW里CSS的详细介绍
-4 ）。字母间距配置覆盖对齐的文本
配置。 Internet Explorer 4 和更高版本连同 Netscape Navigator 6 支持“字母间距”属性。
垂直对齐 ：指定应用他的元素的垂直对齐方式。仅当应用于 <img> 标签时， Dreamweaver 才在“文档”窗口中显示该属性。
文本对齐 ：配置元素中的文本对齐方式。两种浏览器都支持“文本对齐”属性。
CSS 样
注：您需对 DW MX 2004 程式初步了解，并打开他对照本教程进行学习。假如您对 体中文版入门教程 】。
DW MX 2004 尚不熟悉，请浏览 【 DW MX 2004 简
【创建新的 CSS 样式】 将插入点放在文档中，然后执行以下操作之一打开“新建
CSS 样式”对话框：
在“ CSS 样式”面板（“窗口” >“ CSS 样式”）中，单击面板右下角区域中的“新建 CSS 样式”按钮，如下图：
定义您要创建的 CSS 样式的类型：
若要创建可作为 class 属性应用于文本范围或文本块的自定义样式，请选择“创建自定义样式
(Class) ”，然后在“名称”
文本框中输入样式名称。
注意：类名称必须以句点开头， 并且能够包含任何字母和数字组合 （例如， .mycss）。假如您没有输入开头的句点， DWMX2004
系列，您您能够通过下拉列表最下面的“编辑字体列表”来创建新的字体系列。 中文网页默认字体是宋体， 一般留空即可。 浏 览器最好选择用户系统第一种字体显示文本。两种浏览器都支持字体属性。
大小：定义文本大小。能够通过选择数字和度量单位选择特定的大小，也能够选择相对大小。以像素为单位能够有效 地防止浏览器变形文本。 提示： CSS中长度的单位分绝对长度单位和相对长度单位：
css3实现背景图片颜色修改的多种方式
css3实现背景图⽚颜⾊修改的多种⽅式css3可以改变图⽚的颜⾊了。
从此再也不⽤设计出多张图，⽽且随时可以修改。
下⾯就简单介绍下css3中是如何做到改变背景图⽚的颜⾊效果的。
⽅式⼀：利⽤css3滤镜filter中的 drop-shadow代码如下：<style>.icon{display: inline-block;width: 180px;height: 180px;background: url('img/XXX.png') no-repeat center cover;overflow: hidden;}.icon:after{content: '';display: block;height: 100%;transform: translateX(-100%);background: inherit;filter: drop-shadow(144px 0 0 #fff); //需要修改的颜⾊值}</style><i class="icon"></i>说明：drop-shadow 滤镜可以给元素或图⽚⾮透明区域添加投影将背景透明的 PNG 图标施加⼀个不带模糊的投影，就等同于⽣成了另外⼀个颜⾊的图标再通过 overflow:hidden 和位移处理将原图标隐藏mix-blend-mode 取值情况：【除了最后3个，⼤体和ps效果⼀样】mix-blend-mode: normal; // 正常mix-blend-mode: multiply; // 正⽚叠底mix-blend-mode: screen; // 滤⾊mix-blend-mode: overlay; // 叠加mix-blend-mode: darken; // 变暗mix-blend-mode: lighten; // 变亮mix-blend-mode: color-dodge; // 颜⾊减淡mix-blend-mode: color-burn; // 颜⾊加深mix-blend-mode: hard-light; // 强光mix-blend-mode: soft-light; // 柔光mix-blend-mode: difference; // 差值mix-blend-mode: exclusion; // 排除mix-blend-mode: hue; // ⾊相mix-blend-mode: saturation; // 饱和度mix-blend-mode: color; // 颜⾊mix-blend-mode: luminosity; // 亮度mix-blend-mode: initial; // 默认mix-blend-mode: inherit; // 继承mix-blend-mode: unset; // 还原⽅式⼆：利⽤css3的mix-blend-mode 和 background-blend-mode代码如下：<style>.icon{display: inline-block;width: 180px;height: 180px;background-image: url($'img/XXX.png'), linear-gradient(#f00, #f00);background-blend-mode: lighten;background-size: cover;}</style><i class="icon"></i>说明：lighten这个混合模式：变亮、变亮模式与变暗模式产⽣的效果相反，⿊⾊⽐任何颜⾊都要暗，所以⿊⾊会被任何⾊替换掉。
《网页设计与制作》教案-第18讲 使用CSS美化网页二
第18讲使用CSS美化网页二1.1教学目标：◆知识目标1.掌握一些CSS样式表的基本滤镜效果。
2.理解Dreamweaver CS6新增加的Spry组件功能。
◆技能目标1.能使用CSS样式表定义链接的各种状态2.运用重定义HTML标签来统一页面元素格式◆品质目标培养学生认真细致、踏实进取的精神1.2教学重点：1.掌握一些CSS样式表的基本滤镜效果。
2.掌握Dreamweaver CS6新增加的Spry组件功能。
1.3 教学难点制作CSS样式表的基本滤镜效果1.4教学方法：讲练结合，任务驱动、分子任务操练1.5课时安排：2课时1.6教学对象分析：这个班学生具有基本专业技能，不仅仅是要教会他们方法，最重要的是教会他们的规范的动手能力与各种事件多方法的灵活处理能力，在保证全班同学教学进度一致的情况上，培养学生较好的专业基础与创新创作意识。
1.7教学过程：一、CSS滤镜在许多图像编辑软件中都有制作特效的滤镜功能，例如Photoshop和Fireworks，滤镜神奇的功能常常使我们赞叹不绝。
在Dreamweaver中也有这样的功能，我们可以在CSS样式表中使用特定的语法来制作特效。
一般来说，制作文字特效往往使用专业的图像编辑软件，但是图像下载的时间较长，严重影响了页面的下载速度。
通过CSS样式表可以解决这个问题，CSS样式表的定义仅需要三至四行源代码，大大加快了页面下载的速度，同时又增加了页面的视觉效果。
但是，应用样式表也同时带来了许多问题，例如浏览器对样式表的兼容性，同时较复杂的样式表中要用到层，这对其他不支持样式表和层的浏览器来说，无疑是一种限制。
下面我们介绍利用CSS滤镜制作阴影字。
在“CSS样式”面板中单击“新建CSS样式”按钮，打开“新建CSS样式”对话框。
在“名称”文本框中输入样式表的名称，例如.shadow，在选择器类型选项中选择“类”，在“定义在”选项中选择“仅对该文档”，如图3-64所示。
CSS的过滤器属性
CSS的过滤器属性CSS过滤器包括Alpha, BlendTrans, Blur, Chroma, DropShadow, FlipH, FlipV, Glow, Gray, Invert, Light, Mask, RevealTrans, Shadow, Wave, Xray等。
1、静态CSSstyle="filter: Alpha( …… )"Alpha：设置透明度Alpha(Opacity=?, FinishOpacity=?, Style=?, StartX=?, StartY=?, FinishX=?, FinishY=?) Opacity：透明度级别，范围是0-100，0代表完全透明，100代表完全不透明。
FinishOpacity：设置渐变的透明效果时，用来指定结束时的透明度，范围也是0 到100。
Style：设置渐变透明的样式，值为0代表统一形状、1代表线形、2代表放射状、3代表长方形。
StartX和StartY：代表渐变透明效果的开始X和Y坐标。
FinishX和FinishY：代表渐变透明效果结束X和Y 的坐标。
BlendTransBlur风吹模糊效果语法：STYLE="filter:Blur(Add = add, Direction = direction, Strength = strength)"说明：Add：一般为1，或0。
当为1时表示使用模糊效果。
Direction：动态模糊效果的角度方向，0～315度，步长为45度。
0代表垂直向上，按顺时针方向，每45度一个单位，默认值是向左270度。
Strength：效果增长的数值，一般5即可。
设置模糊宽度。
例子：filter:Blur(Add="1",Direction="45",Strength="5")Chroma特定颜色的透明效果语法：STYLE="filter:Chroma(Color = color)"说明：color：#rrggbb格式，任意。
前端开发技术中的图片处理和滤镜效果实现方法
前端开发技术中的图片处理和滤镜效果实现方法在现代互联网时代，图片已经成为了网页设计中不可或缺的一部分。
而为了提升用户体验和页面美观度，前端开发人员常常需要对图片进行处理和添加滤镜效果。
本文将介绍一些常用的图片处理和滤镜效果的实现方法。
一、图片处理方法1. 图片压缩和优化在网站开发过程中，为了加快页面加载速度和减少带宽消耗，图片压缩和优化是非常必要的。
常用的图片压缩方法有使用图片编辑工具进行压缩、使用在线图片压缩网站进行优化等。
在压缩的过程中，需要权衡图片质量和效果，以保证在减小图片尺寸的同时，保持足够的清晰度。
2. 图片裁剪和缩放有时候我们需要根据设计要求对图片进行裁剪或者缩放操作。
可以使用图片编辑工具进行手动操作，也可以使用一些开源的JavaScript库来实现自动化的裁剪和缩放。
3. 图片滚动懒加载对于一些大型图片或者需要滚动才能看到的图片，为了加快页面加载速度，可以使用滚动懒加载技术。
即只在图片进入可视区域时才加载图片，避免不必要的带宽消耗和加载时间。
二、滤镜效果实现方法1. CSS滤镜CSS滤镜是一种在网页中实现滤镜效果的方法，常见的滤镜效果包括模糊、灰度、对比度调整等。
通过设置元素的样式属性，可以轻松地为图片添加滤镜效果。
例如，通过设置"filter: blur(5px);"可以给图片添加一个5像素的模糊效果。
2. Canvas滤镜Canvas是HTML5中新增的一个标签，可以通过JavaScript来操作像素数据，实现各种图形效果。
通过使用Canvas来处理图片，可以实现更加复杂和个性化的滤镜效果。
例如，可以使用getImageData方法获取图片的像素信息，然后根据需要进行像素点的处理，最后使用putImageData方法将处理后的像素数据绘制到Canvas上。
3. SVG滤镜SVG是一种用于描述二维矢量图形的语言，也可以用来创建滤镜效果。
与CSS和Canvas相比，SVG滤镜更加灵活和强大。
css滤镜之DropShadow属性简介
css滤镜之DropShadow属性简介css中的dropshadow属性是给对象添加阴影效果的。
它实现的效果看上去就像使原来的对象离开页面，然后在页面上显示出该对象的投影。
表达式：filter：dropshadow（color=color，offx=offx，offy=offy，positive=positive）说明：dropshadow属性一共有四个参数：color代表投射阴影的颜色。
offx和offy分别x方向和y方向阴影的偏移量。
偏移量必须用整数值来设置。
如果设置为正整数，代表x轴的右方向和y轴的向下方向。
设置为负整数则相反。
positive参数有两个值：true为所有非透明像素建立可见的投影，false为透明的像素部分建立可见的投影。
dropshadow属性和chroma属性一样，Dropshadow属性对图象的支持不好，我指的是JPEG、GIF格式的图象文件，不能支持的原因与Chroma一样，因为这种图象的颜色很丰富，很难找到一个投射阴影的位置。
请看下面实例:1.2.<html>3.<head>4.<title>CSS滤镜之DropShadow属性简介-IT技术论坛</title>5.<style>6.div {position:absolute;top:20;width:350;7.filter:dropshadow(color=#ffccff,offx=10,offy=10,positive= 1);}8.</style>9.</head>10.<body>11.<div>12.<p style="font-family:matisse itc;font-size:50; font-weight:bold;color:#cc00cc;">IT技术论坛 </p>13.</div>14.</body>15.</html>复制代码。
基于网页的CSS滤镜特效
CHEN Zha ng． ．bi n
( De 咖 nt Lm目l a弹and of Comput e r I nf or mat i on，For ei gn
Tr” le Vocat i onal a nd Tec hni cal Col l ege ，Fu zhou Fuj i an 350001， Chi n)
t hat pa ges bec ome mor e f unny．
Ke y wor ds： CSS f i l t er ；s t yl es heet ；Fi t ter ；J avaacr i pt
对于一个网页设计者来说，对HTML语言一 定不会感到陌生，因为它是所有网页制作的基础。 但是 如果 希望 网页美 观、 大方 ，并 且升级 方便 ，维 护 轻松，那么仅仅知道HTML语言是不够的，CSS在 这中间扮演着重要的角色。CSS( Cas c adi ng St y l e She et s) 也就是层叠样式表…，它可以控制和重设 HTML中 的绝大多数 标记，是 对HTML功能 的补 充，并非一种程序设计语言，其主要功能是通过对 HTML标 记进行设 定。对网 页中的对 象进行有 效控 制，使网页能够按照设计者的意愿来显示。
ach i eve s peci al ef f ect s，but a ls o wi t h J avaSc r i pt s c ri pt s t o contr ol t he fi l t e r para ／ne t er, s t o pr od uce a dyna mi c ef f ect ，80
CSS通过Fi t t er 属性使用滤镜功 能，并且可以 进行内部引用(在<HEAD>标记符内) 、局部引用 ( 在<BODY>标记符中) 和外部引用( CSS文件) 。 Fi t t er 属性允许多个滤镜效果叠加。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
FinishOpacity:目标值. Style：1或2或3 StartX：任意值 StartY：任意值 例子：filter:Alpha(Opacity="0",FinishOpacity="40",Style="2") 2.滤镜:blur 语法: STYLE="filter:Blur(Add=add,Direction=direction, Strength=strength)" 说明： Add:一般为1，或0. Direction:角度,0-315度，步长为45度. Strength:效果增长的数值,一般5即可. 例子：filter:Blur(Add="1",Direction="45",Strength="5") 3.滤镜:chroma 语法: STYLE="filter:Chroma(Color=color)" 说明: color:#rrggbb格式，任意. 例子：filter:Chroma(Color="#FFFFFF") 4.滤镜:DropShadow 语法: STYLE="filter:DropShadow(Color=color,OffX=offX,OffY=offY,Positive=positive)" 说明: Color:#rrggbb格式，任意. Offx:X轴偏离值. Offy:Y轴偏离值. Positive:1或0. 例子：filter:DropShadow(Color="#6699CC",OffX="5",OffY="5", Positive="1") 5.滤镜:FlipH 语法: STYLE="filter:FlipH" 例子：filter:FlipH 6.滤镜:FlipV 语法:
STYLE="filter:FlipV" 例子：filter:FlipV 7.滤镜:Glow 语法: STYLE="filter:Glow(Color=color,Strength=strength)" 说明: Color:发光颜色. Strength:强度(0-100) 例子：filter:Glow(Color="#6699CC",Strength="5") 8滤镜:Gray 语法: STYLE="filter:Gray" 例子：filter:Gray 9.滤镜:Invert 语法: STYLE="filter:Invert" 例子：filter:Invert 10.滤镜:Mask 语法: STYLE="filter:Mask(Color=color)" 例子：filter:Mask(Color="#FFFFE0") 11.滤镜:Shadow 语法: filter:Shadow(Color=color,Direction=direction) 说明: Color:#rrggbb格式. Direction:角度,0-315度，步长为45度. 例子：filter:Shadow(Color="#6699CC",Direction="135") 12.滤镜:Wave 语法: filter:Wave(Add=add,Freq=freq,LightStrength=strength,Phase=phase, Strength=strength) 说明: Add:一般为1，或0. Freq:变形值. LightStrength:变形百分比.
巧用CSS的MASK滤镜 Mask滤镜可以为网页上的HTML元件对象作出一个矩形遮罩，关于什么是遮罩?如果你用过Flash中的遮罩 ，你就会知道了，就是那个样子了。实际上对于遮罩你也可以这样来理解，相当于用一块有色布把物件盖起来 ，但内容却被挖去了。若你还不明白，就看下面的图片再听我给你细说。 图1 mask滤镜效果1 在上面这mask滤镜中用这么深的颜色，主要是让你能清楚地看出效果来。让我们来看一下mask滤镜的参 数： 它只有一个参数Color，即遮罩的颜色 以#RRGGBB 格式的颜色值。 你只要在DW3中给它选择一种适合 的颜色就OK了，如上面的mask滤镜代码就是：.mask1 { filter:mask(color=#00ff00) }，在下面的例子中你会 看到，其实滤镜的颜色不是主要的，关键的倒是背景的颜色。 下面我们用mask滤镜做几个特效： 1、五彩缤纷的文字 图2 mask滤镜效果2 上面这种效果怎么样，还不错吧！有点象图象是不是？这就是mask滤镜的效果。这里用了个白色滤镜 ，其代码是：.mask1 { filter:mask(color=#ffffff) }。五彩缤纷的文字颜色实际上就是背景的颜色。其制作方法 也很简单，就是插入一个1*1的表格，给表格加上多彩色的背景，在表格中输入文字，给单元格加载一个mask 滤镜，就做好了，不难吧？！ 2、探照灯动画效果 下面的这种探照灯效果，用Flash做都要费点神，想不到用CSS滤镜却也能做出来！由于探照灯效果是动态 的，我只能抓两张过程图片给你看看，要看动态效果，那你就根据我讲的动手做一个或去我家 （http:/）看。 图3 探照灯动画效果1 图4 探照灯动画效果2 下面介绍制作方法： 这种效果比起上面的例子来要复杂一点，但也就是多点几次鼠标而已。 1、插入一个图层，我称其为“父层”，该层用来放要显示的内容（文字或图片）。再在该层上插入一个 层，我称其为子层，它主要用来产生遮罩效果。 2、在父层的属性面板上设置显示窗口，也就是设置图层的“Clip”属性，在该属性中用的是相对坐标 ，其中：L、T是左上角坐标；R、B 是右下角坐标。以后的子层将只有在你设置的窗口中才显示。设置好的层属 性参数面板如下图所示： 图5 层属性面板 我这里的父层是“Layer4”，我在这里把整个父层都作为显示窗口，也就是当子层运动到父层时就可见 ，在父层之外不可见。 3、我们在子层上插一个背景透明的圆形图片，这里用圆图形的目的主要是探照灯光的投影是个似圆形 ，另外圆外的图象部分必须透明，否则看到的将是一个矩形方框在移动。然后在子层上加载一个颜色与父层背 景颜色相同的mask滤镜，并把子层拉大，使其能完全覆盖父层的内容,这样在浏览器中父层上的内容就只有圆 形图片那一部分能看见，这正是我们希望的效果。
7、Gray ,Invert,Xray 滤镜 语法：{filter:gray} ,{filter:invert},{filter:xray} Gray滤镜是把一张图片变成灰度图；Invert滤镜是把对象的可视化属性全部翻转，包括色彩、饱和度、和亮度 值；Xray滤镜是让对象反映出它的轮廓并把这些轮廓加亮，也就是所谓的“X”光片。
模糊效果处理后的图片，哪个更漂亮，你觉得呢！达到这个效果很容易。仅仅是加了点东东。 <img src="flower1.jpg" style="filter:blur(strength=50)"> 滤镜效果（一） 1、Alpha 滤镜
语法：{FILTER：ALPHA(opacity=opacity,finishopacity=finishopacity,style=style,startx=startx, starty=starty,finishx=finishx,finishy=finishy)} "Alpha"属性是把一个目标元素与背景混合。设计者可以指定数值来控制混合的程度。这种“与背景混合”通 俗地说就是一个元素的透明度。通过指定坐标，可以指定点、线、面的透明度。他们的参数含义分别如下： “opacity"代表透明度水准。默认的范围是从0 到 100，他们其实是百分比的形式。也就是说，0代表完全透 明，100代表完全不透明。”finishopacity"是一个可选参数，如果想要设置渐变的透明效果，就可以使用他们 来指定结束时的透明度。范围也是0 到 。“style" 参数指定了透明区域的形状特征。其中0代表统一形状、 1代表线形、2代表放射状、3代表长方形。”STARTX“和”STARTY“代表渐变透明效果的开始X和Y坐标。 ”FINISHX“和”FINISHY“代表渐变透明效果结束X和Y 的坐标。
Phase:角度变形百分比. Strength:变形强度. 例子:filter:wave(Add="0",Phase="4",Freq="5",LightStrength="5",Strength="2") 13.滤镜:Xray 语法: STYLE="filter:Xray" 例子:filter:Xray CSS滤镜基础 随着网页设计技术的发展，人们已经不满足于原有的一些HTML标记，而是希望能够为页面添加一些多媒体属 性，例如滤镜的和渐变的效果。CSS技术的飞快发展使这些需求成为了现实。从现在开始我要为大家介绍一个 新的CSS扩展部分：CSS滤镜属性（Filter Properties)。使用这种技术可以把可视化的滤镜和转换效果添加到一 个标准的HTML元素上，例如图片、文本容器、以及其他一些对象。对于滤镜和渐变效果，前者是基础，因为 后者就是滤镜效果的不断变化和演示更替。当滤镜和渐变效果结合到一个基本的SCRIPT小程序中后，网页设计 者就可以拥有一个建立动态交互文档的强大工具。也就是CSS FILTER+ SCRIPT， 这就说明想要建立动态的 文档还要一些SCRIPT （脚本语言）的基础。 正常的图片 <img src="flower1.jpg" >
css滤镜效果:css滤镜
疯狂代码 / ĵ:http://CssJiaoCheng/Article23077.html css滤镜
Style属性： 可以应用在标签中，更可用广泛应用在<table><tr><td><body> <center><img><input><font><form><frame><label><map>等等标签中， 更重要的是，它可用在标签中。 页面切换效果： 在页面前部与之间加入"" 说明：duration为页面切换的时间长度，3.000表示3秒钟，一般可以直接输 入3便可；transition为切换效果，从1-23共22种不同的切换效果，其中23 为随机效果。 滤镜效果： Photoshop的滤镜用的多了吧，在页面中也用滤镜搞搞新意思吧！ 语法:STYLE="filter:filtername(fparameter1,fparameter2...)} (Filtername为滤镜的名称，fparameter1、fparameter2等是滤镜的参数) 滤镜说明： Alpha：设置透明层次. blur：创建高速度移动效果，即模糊效果. Chroma：制作专用颜色透明. DropShadow：创建对象的固定影子. FlipH：创建水平镜像图片. FlipV：创建垂直镜像图片. glow：加光辉在附近对象的边外. gray：把图片灰度化. invert：反色. light：创建光源在对象上. mask：创建透明掩膜在对象上. shadow：创建偏移固定影子. wave：波纹效果. Xray：使对象变的像被x光照射一样. 1.滤镜:alpha 语法: STYLE="filter:Alpha(Opacity=opacity,FinishOpacity=finishopacity,Style=style, StartX=startX,StartY=startY,FinishX=finishX,FinishY=finishY)" 说明： Opacity:起始值，取值为0-100,0为透明，100为原图.