延安大学：《网页制作基础教程》课程PPT教学课件_第十二章 CSS中滤镜的使用

网页制作基础教程 牛永洁 延安大学计算机学院

网页制作基础教程 延安大学计算机学院 牛永洁

内容提要 ☆本章主要学习内容 ※CSS中滤镜的使用

内容提要 ❖本章主要学习内容 CSS中滤镜的使用

滤镜 令滤镜可以对网页中的文字或者图片进行一些特效 的处理,能够增加网页的美观效果。 ◆滤镜一般应用在已知大小的元素上,而且一般应 用于图片

滤镜 ❖滤镜可以对网页中的文字或者图片进行一些特效 的处理，能够增加网页的美观效果。 ❖滤镜一般应用在已知大小的元素上，而且一般应 用于图片

滤镜的格式 cSs的滤镜格式:两部分组成一选择器+声明块 一个声明 Img flte:果(参数=值)‖}

滤镜的格式 filter:效果(参数=值) img 选择器 { } 一个声明 CSS的滤镜格式：两部分组成---选择器+声明块

1.不透明度 alpha 1.使用格式fter: alpha(参数1=值参数2=值 匚参数 说明 opacity 不透明度的设置,100完全不透明,0完全透 明 style 指出渐进的形状,0无渐进,1直线渐进,2圆 形渐进,3矩形渐进 startx 设置开始渐迸进的横坐标,作为对象宽度的百分 style=1 starty 设置开始渐进的纵坐标,stye=1 finish 设置渐进结束的横坐标, style=1 mny设置渐进结束的纵坐标sy|1 finishopacity设置渐进结束的透明度

1.不透明度alpha 1. 使用格式filter:alpha(参数1=值,参数2=值…) 参数 说明 opacity 不透明度的设置，100完全不透明，0完全透 明 style 指出渐进的形状，0无渐进，1直线渐进，2圆 形渐进，3矩形渐进 startx 设置开始渐进的横坐标，作为对象宽度的百分 比，style=1 starty 设置开始渐进的纵坐标, style=1 finishx 设置渐进结束的横坐标, style=1 finishy 设置渐进结束的纵坐标, style=1 finishopacity 设置渐进结束的透明度

2.动感模糊bur 1.使用格式 filter blur(参数1=值参数2=值) 匚参数 说明 add True、 false direction 用来设置模糊的参数,顺时针以45度为单位进 行积累 strength 整数值,表示有多少个像素受影响,默认为5

2.动感模糊blur 1. 使用格式filter:blur(参数1=值,参数2=值…) 参数 说明 add True、false direction 用来设置模糊的参数，顺时针以45度为单位进 行积累 strength 整数值，表示有多少个像素受影响，默认为5

3.对颜色的透明处理 chroma 1.使用格式fter: chroma(参数1=值,参 数2=值) 2.将图片中指定的颜色变为透明

3.对颜色的透明处理chroma 1. 使用格式filter: chroma(参数1=值,参 数2=值…) 2. 将图片中指定的颜色变为透明

4阴影敛果 drop shadow 令可以为图像设置阴影效果 drop shadow滤镜的参数 参数 说明 color 设置阴影的颜色 off 设置阴影相对于图像移动的水平距离 offy 设置阴影相对于图像移动的垂直距离 positive 0或者1,0为透明像素生成阴影,1为不透 明像素生成阴影

4.阴影效果dropShadow ❖可以为图像设置阴影效果 dropShadow滤镜的参数 参数 说明 color 设置阴影的颜色 offX 设置阴影相对于图像移动的水平距离 offY 设置阴影相对于图像移动的垂直距离 positive 0或者1,0为透明像素生成阴影，1为不透 明像素生成阴影

5对象翻转pH,fipV=示 1.使用格式fter:fipH水平翻转 2. filter:fip∨垂直翻转

5.对象翻转flipH，flipV 1. 使用格式filter: flipH水平翻转 2. filter: flipV 垂直翻转

6.发光数果goW 1.使用格式fter:goW参数1值,参数2=值..) 参数 说明 color 发光的颜色 strength 发光的强度1-255

6.发光效果glow 1. 使用格式filter:glow(参数1=值,参数2=值…) 参数 说明 color 发光的颜色 strength 发光的强度1-255