CSS滤镜在网页制作中的运用

纹起始 相位 ，值为 ０ ０ ；Ｓｒｎ ｔ ：表示 波形 扭 曲的程度 ． ～１ ０ ｔｅ ｇｈ 例如 ，利 用 Ｗａ ｅ ｖ 滤镜 使 图片产 生波 纹扭 曲的效果 ，代码 如下 ：
Ｗ ａ ｅ（Ｆ ｌｅ ：Ｗ ａ ｅ（ ｄ＝Ｔｒ ｅ ｖ ｉ ｒ ｔ ｖ Ａｄ ＝ ＝ ｕ ，Ｆｒ ｑ ｅ ＝２，Ｌｉｈ Ｓ ｒ ｎ ｔ ｇ ｔ ｔｅ ｇ ｈ一２ ５，Ｐ ａ ｅ ５ ，Ｓ ｒ ｎ ｔ ＝ ５ ｈ ｓ＝ ０ ｔｅ ｇ ｈ ））
Ｃ Ｓ滤镜 主要分 为 以下 几类 ： Ｓ （ ）Ｍａｋ滤镜 ：为对象 建立 一个覆 盖于表 面 的膜 ． １ ｓ （ ）Ｄ ｏ ｓ ａ ｏ ２ ｒｐ ｈ ｄ ｗ滤 镜 ：为指定 对象 产生 阴影 的效果 ． （ ）Ｃ ｒｍａ ３ ｈ ｏ 滤镜 ：将 图片 中某个 颜色 指定为 透 明色．
第１ 牟 ３ 期 ２ ４ 第１ 卷 ０１ ２ 月
辽 宁 师 专 学报
Ｊ ｕ ｎ ｌ ｆＬｉｏ ｉ ｇ Ｔ ａ ｈ ｒ ｌ ｇ ｏ ｒ ａ ａ ｎ ｎ ｅ ｃ ｅ ｓＣｏｌ ｅ ｏ ｅ
Ｖ ｏ．１４ＮＯ．１ １ Ｍａ ｒ． ２０ １２
【 术研 究】 学
Ｎｕ ｂ ｒ ，Ｓ ａ ｔ — Ｎｕ ｍ ｅ ｔ ｒＹ ｍｂ ｒ ｉｉｈ ＝ ｅ ，Ｆ ｎ ｓ Ｘ ＝ ＝Ｎｕ ｍｂ ｒ ｉ ｉｈ — Ｎｕ ｂ ｒ ｝ ｅ ，Ｆ ｎ ｓ Ｙ ｍ ｅ） ．
Ｏｐ ｃ ｙ ａｉ ：开始处 的透 明度 ；Ｆｎｓ Ｏｐ ｃ ｙ ｔ ｉｉ ｈ ａｉ ：结 束 处 的透 明度 ；Ｓ ｙｅ ｔ ｔｌ：透 明 的形 状 和 区域 （一 平均 透 Ｏ 明 ，一线状 透 明 ，一 圆形 透 明 ，一 菱形 透 明） Ｓａｔ Ｓａｔ 和 ＦｎｓＸ、 ｉｉ Ｙ 分 别代 表 渐 变透 明效 果 １ ２ ３ ； ｔｒＸ、 ｔｒ Ｙ ｉｉ ｈ Ｆｎｓ ｈ 的开始坐标 和结束 坐标 ． 例如 ：Ｆｌ ｒ ｉ ｅ ：Ａｌｈ （ ａｉ ｔ ｐ ａ Ｏｐ ｃ ｙ一 ０ ｔ ，Ｆｎｓ ｏ ａｉ ｉｉ ｐ ｃ ｙ一 １ ０ ｔｌ 一 ３ ｔｒＸ一 ８ ，Ｓａｔ ｈ ｔ ０ ，Ｓｙｅ ，Ｓ ａｔ ５ ｔｒＹ一 １ ０ ５，
Ａｄ ：表 示是否 应用 Ｗａ ｅ滤镜 的 ＨＴ ｄ ｖ ＭＬ对 象 上显 示 原 对 象 的模 糊 方 向 （ ｕ 表 示 显 示 ； ａｓ Ｔｒ ｅ Ｆｌ ｅ表示
不显示 ） Ｆ ｅ ：设定 波纹 的数量 ；Ｌ ｇ ｔ ｔ ｎ ｔ ：设 定 波纹 的 光 照程 度 ；Ｐ ａｅ ． ｒｑ ｉｈ Ｓｒ ｇｈ ｅ ｈ ｓ ：以 百分 数 的形 式设 置 波
Ｆｉ ｅ ： Ｆｉ ｅ ｎ ｍｅ Ｐ ｒ ｍ ｅ ｅ ｓ ｌ ｒ ｔ 】 ｒ ａ （ ａ ａ ｔ ｒ） ｔ
收稿 日期 ：２ １一 Ｏ — １ ｏ２ １ ５ 作 者 简 介 ：周 潇 （９ ５ ） １ ７ 一 ，女 ，山 西忻 州 市 人 ，讲 师 ，主 要 从事 计 算 机 应 用 方 面 研 究
Ｃ Ｓ滤镜 在 网页 制作 中的运用 Ｓ
周 潇
（ 西忻 州职 业 技 术 学 院 ， 山西 忻 州 ０ ４ ０ ） 山 ３０ ０
摘
要 ：介 绍 Ｃ Ｓ 滤镜 的语 法 ，对 几 种 常 用 Ｃ Ｓ滤 镜 的 主 要 属性 进 行 分 析 ，并 指 出 Ｃ Ｓ 滤 镜 可 以像 图像 Ｓ Ｓ Ｓ
２ ２ Ａｌｈ ． ｐ ａ滤 镜
Ａｌｈ ｐ ａ滤镜 是使文 字或 图像实 现渐 变 的半 透 明效 果．ＧＩ Ｆ格 式 的图 片 里半 透 明效 果 就是 利用 Ｃ Ｓ中 Ｓ
Ａｌｈ ｐ ａ滤镜实现 的． 语法 格式 ：
Ａｌｈ ｐ ａ｛ｆ ｔｒ ｉ ｅ ：Ａｌ ｈ Ｏｐ ｃｔ ＝ Ｏｐ ｃｔ ，Ｆ ｎ ｓ ｏ ａ ｉｙ Ｆ ｎ ｓ ｏ ａ ｉ ，Ｓ ｙ ｅ Ｓ ｙｅ ，Ｓ ａ ｔ ｌ ｐ ａ（ ａ ｉ ｙ ａ ｉｙ ｉ ｉｈ ｐ ｃｔ ＝ ｉ ｉｈ ｐ ｃｔ ｙ ｔｌ— ｔｌ ｔ ｒＸ—
１ ＣＳ Ｓ滤 镜
Ｃ Ｓ滤镜体 现为 Ｃ Ｓ样 式表 中的一种属性 ，是扩 展 也是 有 机 的组成 ． Ｃ Ｓ滤 镜可 以表现 和 处理 页 面 Ｓ Ｓ Ｓ 中的文 字和 图像 ， 到丰 富多彩 的页 面的效果 ．但它 并不是直 接作 用 于对 象 本身 ，而是 通 过后 台运 行一 些 达 特 定代码来 实现 操作． Ｃ Ｓ滤 镜 能够 与 ＨＴ Ｓ ＭＬ脚 本相 结合 ，通 过 控制 滤 镜 的各 项 参数 来 产 生动 态 效果 ， 让 网页 的效果趋 于生动 ［ ． ３ ］
语法 格式 ： ｛ ｉ ｅ：Ｄｒｐ ｈ ｄ ｗ （ ｏｏ ＝ Ｃ ｌｒ Ｆｌ ｒ ｔ ｏ ｓａ ｏ Ｃ ｌｒ ｏｏ ，Ｏｆ ｆ Ｘ＝Ｏｆ ｆ Ｘ，Ｏｆ ｆ Ｏｆ Ｙ＝ ｆＹ，Ｐ ｓ ｉｅ Ｐ ｓ ｉｅ ） ｏ ｉ ｖ ＝ ｏ ｉｖ ） ｔ ｔ
Ｃ ｌｒ ｏｏ ：表示投 射 阴影 的颜 色 ；Ｏｆ ｆ Ｘ和 Ｏｆ ｆ Ｙ：表示 Ｘ方 向和 Ｙ方 向阴影 的偏 移量 ；Ｐ ｓｔ ｅ ｏ ｉｖ ：表示 阴 ｉ 影 的透 明程度 ． 例如 ，利 用 Ｄｒｐ ｈ ｄ ｗ滤 镜实 现文 字就像 从页 面中飞 出来 一样 ，并 留下 一层 淡 淡 的影子 的效果 代 码 ｏ ｓａｏ
三个 相对独立 的部分 ：结构 层 、表现层 及行 为层． 而 Ｃ Ｓ在基 于标 准 Ｗｅ 发 中 的作 用 就是 用来 控制 网 Ｓ ｂ开
页 的表现层 ．
Ｃ Ｓ滤镜 在某些 专业 平面 图像处 理软件 ，如 Ｐ ｏｏｈ ｐ等 中的运用 取得 了很 大 的成 功 ，由于它 的高使 Ｓ ｈ ｔｓ ｏ 用率 及 图像 效果 的高表 现力 ，使得 Ｃ Ｓ滤镜 在平面 图像领域 独树一 帜．然 而 将其 放 在 网页 制作 的范 畴 中 ， Ｓ 则会 在无形 中造成 网页制 作工 作 量 的增大 ． 随着 网 页制 作工 具 Ｄｒａ ｅ ｍｗｅｖ ｒ的发 展 ］ ａｅ ，其 Ｃ Ｓ样式 也 Ｓ 可 以制作 出像 Ｐ ｏｏ ｈ ｐ里一 样 的滤镜． 同时 随着 Ｄｒａ ｈ ｔｓ ｏ ｅｍｗｅ ｖｒ中 Ｃ Ｓ技术 的飞 速发 展 ，页面 一些 多姿 ａｅ Ｓ 多彩 的多媒 体属性 （ 如滤 镜 的渐 变效 果等 ） ，也都一 一成 为 了现实 ．
（ ）Ｂ ｕ 滤 镜 ：产生 画面模 糊 的效 果 ，犹如风 吹 的画面感． ４ ｌｒ
（ ）ＦｉＨ、ＦｉＶ滤镜 ：在 对象 上产生 水平或垂 直 翻转 的效果 ，ＦｉＨ 表示 水 平 翻转 ，Ｆ ｉＶ表 示垂 ５ ｌ ｐ ｌ ｐ ｌ ｐ ｌ ｐ
直 翻转 ． （ ）Ｗａ ｅ ６ ｖ 滤镜 ：用来 把对 象按 照垂直 的波纹 样式打乱 ．
Ｆｎｓ Ｘ 一 １ ０ ｉ ｉｈ ５ ．Ｆｉ ｉ ｈ 一 ห้องสมุดไป่ตู้ ） ｎｓ Ｙ ０
这段代 码实现 了 图片 中间菱形 区域 的渐变 透 明效 果． 只 要修 改 Ａｌｈ ｐ ａ滤 镜 属 性 值就 会 有不 同的透 明
效 果．
２ ３ Ｗ ａ ｅ滤镜 ． ｖ
Ｗａ ｅ ｖ 滤镜 的作用 是 以垂 直 的波纹 样 式扭 曲文 字或 图像 ．Ｗａ ｅ滤镜 的表 达 式 相对 要 复杂 一 些 ，语法 ｖ
和解 释如下 ：
Ｄｉ Ｐ ｓｔ ｎ：Ａｂ ｏ ｕ ｅ ｖ｛ ｏ ｉ ｏ ｉ ｓ ｌｔ ；Ｔｏ ｐ：３ ５；Ｗ ｉｔ ｄ ｈ：５ ０；Ｆ ｌｅ ：Ｄｒ ｐ ｈ ｄ ｗ （ ｌｒ＝ ０ ｉ ｒ ｔ ｏ ｓａｏ Ｃｏｏ ＝ ＝＃６ ９ ｃ ，ＯｆＸ一 ６ ９ｃ ｆ
２ ，Ｏｆ ５ ｆ Ｙ＝２ ，Ｐ ｓ ｉｅ ） ）／ ＊定 义 Ｄｉ 围 内的样式 ，绝 对定 位 ，阴影 的 颜 色为 ＃６ ９ ｃ ，阴影 坐 ０ ｏｉ ｖ ＝１ ； ／ ｔ ｖ范 ６ ９ｃ 标 为向右偏 移 ２ 个 像素 ，向下 偏移 ２ ５ Ｏ个像 素 ＊／ ／ Ｄｒｐ ｈ ｄ ｗ滤 镜 更 多 地 应 用 在 文 字 对 象 上 ， 由 于 Ｊ Ｅ ｏ ｓ ａｏ Ｐ Ｇ、ＧＩ 格 式 的 图 像 文 件 颜 色 丰 富 ， Ｆ Ｄ ｏ ｓａｏ ｒ ｐｈ ｄ ｗ滤镜 不容 易找 到一个 投射 阴影 的位置 ，所 以不支持 这类 图像 ．
２ Ｃ Ｓ滤 镜 的 运 用 Ｓ
为了更好 地在 网页制 作 中运 用 Ｃ Ｓ滤镜 ，本文 结合具 体实 例对 常用 的几个 滤镜 进行分 析 Ｓ
２ １ Ｓ ａ ｏ 滤 镜 和 Ｄｒ ｐ ｈ ｄ ｗ 滤 镜 ． ｈ ｄ ｗ ｏｓａ ｏ
．
在 Ｃ Ｓ滤镜 中 ，Ｓ ａ ｏ 滤镜 和 Ｄｒｐ ｈ ｄ ｗ滤 镜 都 可 以在 指定 的方 向实 现 阴影 的效 果． 但 Ｓ ａｏ Ｓ ｈｄｗ ｏｓａ ｏ ｈｄ ｗ 滤镜是可 以在任 意角度 实现有 渐进 效果 的阴影 ，Ｄ ｏ ｓ ａ ｏ 滤镜则 是用 Ｘ轴 和 Ｙ轴 的偏 移量来 实现下 落 ｒ ｐｈ ｄ ｗ 式的 阴影 ．所 以 ，Ｓ ａ ｏ ｈ ｄ ｗ滤镜 实现 的阴影就 像 是与 原 文字 或 图像 是一 体 的 ，而 Ｄ ｏ ｓ ａ ｏ 滤镜 实 现 的 ｒｐ ｈ ｄ ｗ 阴影效果 就像和 原来脱 离 了一样 ．
周 潇
Ｃ Ｓ滤镜 在 网 页制 作 中的运 用 Ｓ
２ ９
Ｆｌ ｒ 属 性 选 择 符 ， 只 要 进 行 滤 镜 操 作 就 必 须 定 义 Ｆｌ ｒ Ｆ ｌ ｒａ ｉｅ 是 ｔ ｉ ｅ． ｉ ｅｎ ｍｅ 为 滤 镜 的 属 性 名 ， ｔ ｔ Ｐ ｒｍｅｅｓ表示各个 滤镜 属性 的选 项 ， 数 可 以是一 个 ， ａａ ｔｒ 参 也可 以多个 ， 个参 数 之间用 “ ”隔开 ， 同的 各 ， 不 参数值会 呈现不 同的滤 镜特 效．
（ ）Ｉｖ ｒ 滤 镜 ；使彩 色 图片产 生 照片底 片的效果 ． ７ ｎ ｅｔ （ ）Ｓ ａ ｏ ８ ｈ ｄ ｗ滤镜 ：在 指定 的方 向实现 物体 的投 影． （ ）Ｇｌｗ滤镜 ：作 用于某 个对 象后 ，会使该 对象 的外轮廓 产生 光晕 的特 殊效果 ． ９ ｏ （０ １ ）Ａｌｈ 滤 镜 ：可 以对对 象设置 透 明度 ． ｐａ 为了更好 使用 Ｃ Ｓ滤镜 ，本 文对 Ｃ Ｓ滤镜 的语法进 行解 释． Ｓ Ｓ Ｃ Ｓ滤镜 属性 的标识 符是 Ｆｌ ｒ 它的语 法格式 为 ： Ｓ ｉｅ． ｔ
中 图分 类 号 ：ＴＰ ９ ． ９ ３３０２ 文 献 标 识 码 ：Ａ 文章 编 号 ：１ Ｏ — ５ ８ （ ０ ２ ０ 一 Ｏ ２ —０ Ｏ ８ ６ ８ ２ １ ）１ ０ ８ ３
０ 引 言
Ｃ Ｓ Ｃ ｓａ ｉｇＳ ｙｅＳ ｅｔ通 常 称 为层 叠 样 式表 ，亦 或 把 它 看 作 一 种 标 准 化 的 Ｗｅ Ｓ （ ａｃｄｎ ｔｌ ｈ ｅ） ｂ模 版 ．早 期 由 Ｗ３ Ｃ组织 审核通 过并予 以推 荐． 面对 网页设计 中所 凸显 的整体 化 、结 构化 ，基 于 Ｗｅ ｂ标 准将 网 页拆分 为
软 件 一 样 处 理 页 面 中 的 文 字 和 图 像 ，还 可 以 通 过 利 用 脚 本 控 制 滤 镜 的 参 数 来 产 生 动 态 效 果 ， 同 时 结 合
Ｄ ｅ ｍｗｅ ｖ ｒ ｒａ ａ ｅ 实例 表 明 ，运 用 Ｃ Ｓ滤 镜 可 以使 网 页更 加 生 动． Ｓ
关 键 词 ：Ｃ Ｓ滤镜 ； 网 页 制作 ；Ｄ ｅｍｗｅｖ ｒ Ｓ ｒａ ａｅ
在文字 上使用 Ｗａ ｅ滤镜 时 ，为 了不 使 文 字 的颜 色 发 生 变化 ，一 般 把 “ ｉｈＳｒｎ ｔ ” 的值 设 置 为 ｖ Ｌ ｇ ｔ ｔｅ ｇｈ “” ０ ．为使文 字看得 清 晰 ，“ ｔｅ ｇ ｈ Ｓ ｒｎ ｔ”的值 应设 在 “ ”左右 ；要使 效果 明显 则文 字 的字号要 稍大 一些． ５
格 式为 ：
Ｆ ｌｅ ：Ｗ ａ ｅ （ ｄ＝ ｉ ｒ ｔ ｖ Ａｄ ＝ ＝Ａｄ ｄ， Ｆｒ ｑ— Ｆ ｅ ｅ ｒ ｑ， Ｌ ｇ ｔ ｔｅ ｇ ｈ＝ Ｓ ｒ ｎ ｔ ｉ ｈ Ｓ ｒ ｎ ｔ ＝ ｔ ｅ ｇ ｈ， Ｐｈ ｓ ＝ ａ ｅ— Ｐ ａ ｅ Ｓ ｒ ｎ ｔ ｈ ｓ ， ｔ ｅ ｇ ｈ— Ｓ ｒｎ ｔ ） ｔｅ ｇ ｈ