`

filter

CSS 
阅读更多
Filter是微软对CSS的扩展，与PhotoShop中的滤镜概念相似，它可以用很简单的方法对页面中的文字特效作出特效处理，静态如阴影、模糊的效果，动态如各种淡入淡出效果。下面我来仔细讲解一下（以下内容需在IE4.0下浏览）：　

静态滤镜：

要显示滤镜效果，必须先建立一个区域（<div>），并规定区域的范围（width和height），以下是对一个一般区域的规定：

<style>
<!--
div {height:50;width:300;font-size:20pt}
//-->
</style>

把此样式单放入到“<head>”标记和“<body>”之间，然后在“<body>”标记间填写正文：
<div>…………</div>
在“<div>”标记中插入样式单：
style="filter:样式(参数1,参数2,参数3……);"

下面给出完整的例子：

<HTML>
<style>
   div {height:100;width:400;font-size:20pt}
</style>

<body bgcolor=yellow>
<h1 align=center>Filter Effects</h1><hr>
<div style="filter:wave(add=0,freq=1,lightStrength=20,phase=50,strength=20)">
<img src="00cirr.gif">
this is div<br>is <br>wave-filtered
</div>

<div style="filter:alpha(opacity=10,finishOpacity=10,style=10,startX=10,startY=10,finishX=20,finishY=30,add=0,direction=45,strength=10)">
this is alpha.
<img src=00cirr.gif>
</div>

<div style="filter:blur(add=0,direction=45,strength=5)">
this is blur effect.
<img src=00cirr.gif>
</div>

<div style="filter:chroma(color=white)">
this is chroma effect
<img src=00cirr.gif>
</div>

<br>
<div style="filter:flipV">
this is flipV effect
<img src=00cirr.gif>
</div>

</body>
</html>

以wave滤镜为例，它在垂直方向产生正弦波形，其中参数add表示是否加入原图象（1=是，0=否），freq表示波的数量，phase表示波形的起始偏移量，lightStrength表示光对波纹照射的强度，strength表示波的强度。下表是Filter支持的所有滤镜样式及其参数：

Filter样式
简要说明
支持参数

alpha
设置图片或文字的不透明度
opacity、finishOpacity、style、startX、startY、finishX、finishY、add、direction、strength

blur
在指定的方向和位置上产生动感模糊效果
add、direction、strength

chroma
对所选择的颜色进行透明处理
color

dropShadow
在指定的方向和位置上产生阴影
color、offX、offY、positive

flipH
沿水平方向翻转对象
　

flipV
沿垂直方向翻转对象
　

glow
在对象周围上发光
color、strength

gray
将对象以灰度处理
　

invert
逆转对象颜色
　

light
对对象进行模拟光照
　

mask
对对象生成掩膜
color

shadow
沿对象边缘产生阴影
color、direction

wave
在垂直方向产生正弦波形
add、freq、lightStrength、phase、strength

xray
改变对象颜色深度，并绘制黑白图象
　


其中经常出现的color属性可以用十六进制表示（如#ff0000），也可以用rgb()表示（如
rgb(255,0,0)），还可用系统承认的颜色名表示（如red）。
以上就是静态滤镜的全部内容，要注意的是CSS是区分大小写的！
分享到：
| JavaScript特效
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    cors-filter-2.5.jar

    标题中的“cors-filter-2.5.jar”是一个Java Web应用程序使用的库，专门用于处理跨域资源共享（CORS）的问题。CORS是一种机制，允许Web应用通过浏览器从不同源（即非同源策略允许的源）获取资源，以克服浏览器的同源...

    RF filter.rar_RF CBF filter_rf_Filter_rffilter_射频滤波器_滤波器 参数

    本资料“RF filter.rar”涵盖了射频滤波器设计的各种方面，包括低通滤波器、带通滤波器以及Chebyshev滤波器，这些都是射频滤波器的常见类型。 1. 射频低通滤波器：这种滤波器允许低频信号通过，而阻止高频信号。在...

    java filter打印请求返回参数

    ### Java Filter 打印请求返回参数详解 #### 一、背景与目的 在Web开发过程中，经常需要在请求处理流程中增加一些通用的功能，比如日志记录、性能监控、安全控制等。Java Servlet规范提供了Filter机制来实现这些...

    Servlet Filter 的单元测试

    Servlet Filter 是Java Servlet API中的一个重要组件，主要用于在Servlet处理请求之前或之后进行拦截处理，例如权限检查、日志记录、内容转换等。进行Servlet Filter的单元测试是确保Filter功能正确性和健壮性的重要...

    FilterPro使用指南

    TI公司开发的FilterPro是一款软件工具，旨在辅助工程师设计由多重反馈（MFB）和Sallen-Key拓扑结构实现的有源滤波器。它能够减少设计和验证有源滤波器时所耗费的时间和精力，这对于现代电子设计而言极为重要，因为...

    filter solutions 简易教程

    Filter Solutions 简易教程 Filter Solutions 是一种滤波器设计软件，旨在帮助用户快速设计和实现滤波器电路。下面是 filter solutions 简易教程的知识点总结： 一、Filter Solutions 软件简介 * Filter ...

    FilterPro TI滤波器设计 安装包

    **FilterPro TI滤波器设计软件详解** FilterPro是由美国Texas Instruments（TI）公司开发的一款专业滤波器设计工具，广泛应用于信号处理、通信、音频系统等领域。它为工程师提供了直观且高效的滤波器设计环境，能够...

    Datagrid-filter插件

    `Datagrid-filter`插件正是针对这种需求设计的，它是一个高效且实用的Grid插件，旨在提升数据网格的可操作性和用户交互性。这个插件的核心功能是为每一列提供过滤条件，使得用户能够快速筛选出所需的信息，极大地...

    java中filter的用法（过滤器）

    ### Java中的Filter（过滤器）使用详解 #### 一、Filter概述 在Java Web开发中，`Filter`是一种非常实用的技术，它可以在请求到达目标资源（如Servlet或JSP页面）之前进行预处理，或者在响应返回客户端之前进行后...

    cors-filter-1.7.jar，cors-filter-2.5.jar，cors-filter-2.10.jar

    标题中的“cors-filter-1.7.jar”，“cors-filter-2.5.jar”和“cors-filter-2.10.jar”是针对不同版本的CORS过滤器实现。这些jar包是专门为Tomcat设计的，用于处理跨域请求过滤，确保服务器能够安全地响应来自不...

    预防XSS攻击和SQL注入XssFilter

    &lt;filter-name&gt;XssFilter&lt;/filter-name&gt; &lt;filter-class&gt;com.xxx.Filter.XssFilter&lt;/filter-class&gt; &lt;/filter&gt; &lt;filter-mapping&gt; &lt;filter-name&gt;XssFilter&lt;/filter-name&gt; &lt;url-pattern&gt;/* &lt;/filter-mapping&gt;

    filter wiz pro v5

    Filter Wiz Pro适用于低于-1Hz 至10MHz 范围内的截止频率，而适用于此范围的无源滤波器设计必须具备非常大的组件值和组件尺寸 　Filter Wiz Pro在几分钟内便能让您设计、优化和仿真一套完整的多级有源滤波器解决方案...

    Filter过滤器的代码及其web.xml配置代码

    在Java Web开发中，Filter（过滤器）是一个非常重要的组件，它允许我们在数据处理之前或之后执行特定的任务，比如防止跨站脚本攻击(XSS)、处理字符编码问题、实现权限控制等。在这个主题中，我们将深入理解Filter的...

    FilterPro 安装及基本教程中英文

    FilterPro是一款由德州仪器（TI）开发的专业有源滤波器设计软件，它为电子工程师提供了强大而便捷的工具，用于模拟和优化滤波器设计。本教程将涵盖FilterPro的安装过程以及基本的使用方法，包括Sallen-Key滤波器和多...

    FilterBuilder过滤器

    在IT领域，尤其是在Web开发中，`FilterBuilder`是一个重要的工具，它允许用户构建自定义的查询和过滤条件，以动态地筛选数据。这个组件通常用于数据量大、需要复杂查询逻辑的应用场景，如数据分析、报表展示或者管理...

    filter pro 有源滤波器设计软件 TI公司

    **Filter Pro 有源滤波器设计软件：TI公司的创新工具** Filter Pro是一款由美国德州仪器（TI）公司开发的专业有源滤波器设计软件。TI作为全球知名的半导体和集成电路制造商，其产品线广泛，包括各种模拟和数字解决...

    imu_filter_madgwick_IMU滤波_filter_imu_filter_madgwick_IMU_IMU滤波_源

    标题中的“imu_filter_madgwick”指的是Madgwick滤波算法，这是一类用于惯性测量单元（IMU）数据处理的算法，主要用于融合来自陀螺仪和加速度计的数据，以消除噪声和漂移，提高传感器测量的稳定性和准确性。...

    filter对request请求拦截，对请求参数进行修改

    对request请求进行拦截，... &lt;filter-class&gt;weixin.idea.waiting.cq.controller.JsFilter&lt;/filter-class&gt; &lt;/filter&gt; &lt;filter-mapping&gt; &lt;filter-name&gt;sqlFilter&lt;/filter-name&gt; &lt;url-pattern&gt;/* &lt;/filter-mapping&gt;

    Wavelets and Filter Banks_MIT

    Wavelets and Filter Banks_MIT Lecture 1 Discrete-time Filters: Convolution Fourier Transform Lowpass and Highpass Filters Lecture 2 Sampling Rate Change Operations: Upsampling and Downsampling ...

    FilterPro（滤波器设计软件）

    **FilterPro滤波器设计软件详解** FilterPro是一款专业级的滤波器设计软件，它以其用户友好的界面和高效的设计工具，深受电子工程师和研究人员的喜爱。该软件主要用于设计、分析和优化各种类型的滤波器，包括模拟...

Magicbox
Global site tag (gtag.js) - Google Analytics