CSS滤镜.doc_第1页
CSS滤镜.doc_第2页
CSS滤镜.doc_第3页
CSS滤镜.doc_第4页
CSS滤镜.doc_第5页
免费预览已结束，剩余1页可下载查看

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

5.1.2 CSS 滤镜效果这里通过对图片使用滤镜效果来进行说明。滤镜效果可在创建CSS 样式时，在弹出的“.c的CSS 规则定义”对话框中，通过设置“分类”中的“过滤器”获得，如图5.25 所示。图 5.25 添加滤镜效果1Alpha 滤镜Alpha 滤镜是把一个目标元素与背景混合，可以指定数值来控制混合的程度，通俗地说，就是一个元素的透明度。通过Alpha 滤镜指定点、线、面的透明度，其参数格式为Opacity=Opacity，FinishOpacity=FinishOpacity，Style=Style，StartX=StartX，StartY=StartY，FinishX=FinishX， FinishY=FinishYOpacity 代表透明度。默认值的范围是0100，0 代表完全透明，100 代表完全不透明。FinishOpacity 是一个可选参数，如果想要设置渐变的透明效果，就可以使用它们来指定结束时的透明度，值的范围也是0100。Style 参数指定了透明区域的形状特征，其中0 代表统一形状、1 代表线形、2 代表放射状、3 代表长方形。StartX 和StartY 代表渐变透明效果的开始X 和Y 的坐标。FinishX 和FinishY 代表渐变透明效果的结束X 和Y 的坐标。如图 5.26 所示为透明滤镜效果的例子，从左到右，第1 个图为原图，其他3 个图的参数为 (1) Opacity=50 (2) Opacity=80，style=1，startx=6，starty=6，finishx=80，finsishy=80 (3) Opacity=80，style=3，startx=5，starty=5，finishx=80，finsishy=80 图 5.26 Alpha 滤镜效果2Blur 滤镜Blur 滤镜产生模糊效果，其参数格式为Add=add，direction=direction，strength=strengthAdd 参数是一个布尔判断“true”(默认)或者“false”，指定图片是否被改变成模糊效果。Direction 参数用来设置模糊的方向，模糊效果是按顺时针的方向进行的。0 代表垂直向上，然后每45为一个单位。Strength 值只能使用整数来指定，代表有多少像素的宽度将受到模糊影响。默认值是5个。在网页制作时，设置strength=1，文字会有非常好看的效果。如图 5.27 所示为模糊效果的例子，参数为add=true，direction=135，strength=100。图 5.27 Blur 滤镜效果3Gray 滤镜和Invert 滤镜Gray 滤镜是把一张图像变成灰度图；Invert 滤镜是把对象的可视化属性全部翻转，包括色彩、饱和度和亮度值，这两个滤镜都没有参数。Gray 滤镜的选择如图5.28 所示，产生的效果如图5.29 所示。图 5.28 选择Gray 滤镜图 5.29 Gray 滤镜效果Invert
人人文库> 全部分类> 应用文书 > 技术指导

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论