第二部分 第二十一章 滤镜特效的应用-【职升课堂】中职计算机应用1同步训练（高教版）

第二十一章滤镜特效的应用 学习目标 1.了解滤镜特效中的透明度、模糊等概念。 2.能在网页中运用滤镜特效进行网页设计。 3.能够灵活运用各种样式对网页进行美化 ■同步训练 6.在CSS的表达中，能同时实现元素水平和 一、选择题 垂直翻转的是()。 A.fliph flipv 1.下列不属于滤镜属性的是( B.fliph A.gray B.mask C.flipv C.position D.wave D.fliph+flipv 2.在CSS中，元素产生波浪效果，滤镜属性 7.在wave属性包含的参数中，设置产生波浪 为(）。 数目的是()。 A.wave B.inver A.phase B.lightstrength C.gray D.alpha C.fraq 3.在CSS中，元素产生遮罩效果，滤镜属性 D.add 为(）。 8.在dropshadow/属性包含的参数中，代表投 A.blur B.glow 射阴影的颜色的是( C.dropshadow D.mask A.offx B.offy 4.在alpha属性包含的参数中，代表透明度 C.color D.positive 等级，参数值从0到100的是( )。 二、填空题 1.我们学习“滤镜”功能的目的，即了解如何 A.opacity B.style 利用不同的光作用使 和 呈 C.finishopacity D.startx 现更多特效。 5.下列不是滤镜属性hhur的参数的是（ 2.在CSS中，滤镜属性是 A.add B.finishy 3.针对滤镜的各种属性，根据表二的备选项 C.direction D.strength 完成表一的填空内容。 155 职升课堂·计算机应用1◆ 表一 明色，这两个属性都只有一个参数值，即 滤镜属性 请填空 alpha 9. shadow滤镜属性有渐变的效果，设置渐 blur fliph.flipv 变阴影的颜色参数是 设置渐变 gray 阴影的方向参数是 这个参 invert xray 数和滤镜属性 模糊效果的参数值 wave 设置方法一样。 dropshadow glow 三、程序设计题 mask 网页结果如下图，第一行为原图，第二行 shadow chroma 每个图片都加了相应的效果，因印刷出来 表二 后是黑白效果，所以CSS中每个特效后面 备选项 属性说明 都给出文字注释，根据题意，请填空： A 灰度效果 B 波浪效果 第十九章图片和多媒体文件的使用 C 边缘光晕效果 0 快速移动的模糊效果 E 阴影渐变效果 HTML F 颜色透明效果 G 阴影效果 H 透明和渐变效果 X射线效果 J 水平和垂直翻转效果 K 遮罩效果 HTML L 反转效果，类似于底片 4.在滤镜属性hhur的参数direction中，以 <html><head> 为一个单位。 <meta charset="UTF-8"> 5.在滤镜属性中， 代表水平翻转， <itle>第十九章图片和多媒体文件的使 代表垂直翻转。 用</title> 6.在滤镜属性中， 效果是设置无彩 色图片， 效果是加亮对象的轮 <style type="text/css"> 廓，这两个属性都没有参数。 .divI (position:fixed;top:70px;left: 7.滤镜属性 用来设置对象周围的发光 10px;} 效果。该属性有两个参数值，分别设置发光 .div2 {position:fixed;top:200px;left: 的颜色 和发光的强度 10px;} 8 滤镜属性产生遮罩的效果， .div3 {position:fixed;top:330px;left: 滤镜属性用来设置某个颜色为透 10px;} 156 第二部分HTML、CSS、JavaScript标准教程◆◆◆◆ img float:left; :1015px0 件的使用<h3> 0:width:100px:height:100px; <div class="div1"> h3{ absolute;left:150px; <img sre="img/HTML.png"> one filter:. (12):}/*调整饱 <img src="img/CSS.png"> 和度*/ <img src="img/JS.png"> .two (filter: (8px 8px <img src="img/APP.png" 1 Opx blue:}/*设置阴影效果* <img sre=-"imgl前端.png"> .three{filter::sepia(100%)}/体转为深 </div><br> 褐色 <div class="div2"> .four (filter: (30%)}/*调整 <img class="on