视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
CSS教程(七)滤镜
2020-11-27 18:51:59 责编:小采
文档


CSS提供了一些内置的多媒体滤镜特效,使用这种技术可以把可视化的滤镜和转换效果添加到一个标准的HTML元素上,例如图片、文本容器、以及其他一些对象。Dreamweaver4提供了16种滤镜可供选择,如下图:

下面,我们就来看看在Dreamweaver4里如何方便的使用这些CSS滤镜。

建立一个自定义样式“.filter”,在Filter下拉框里选Alpha滤镜,我们将“Alpha(Opacity=?, FinishOpacity=?, style=?, StartX=?, StartY=?, FinishX=?, FinishY=?)”的Opacity参数设为50,后面的参数都删掉,如下图:

按OK后就建立了一个“.filter”的自定义样式,我们把这个样式应用到图片上,图片就是半透明的了。如果把这个样式应用到表格上,表格也变成了半透明状态了。注意所有滤镜效果都要在浏览器里才能看到。下面是原码:

<style type="text/css">

<!--

.filter { filter: Alpha(Opacity=50)}

-->

</style>

注意:这个例子我们没有用到后面的几项参数,只用到Opacity参数,所以将其他参数删掉。

下面我们来讲解每个滤镜的效果和参数:

1. Alpha:设置透明度

Alpha(Opacity=?, FinishOpacity=?, style=?, StartX=?, StartY=?, FinishX=?, FinishY=?)

Opacity:透明度级别,范围是0-100,0代表完全透明,100代表完全不透明。

FinishOpacity:设置渐变的透明效果时,用来指定结束时的透明度,范围也是0 到 100。

style:设置渐变透明的样式,值为0代表统一形状、1代表线形、2代表放射状、3代表长方形。

StartX和StartY:代表渐变透明效果的开始X和Y坐标。

FinishX和FinishY:代表渐变透明效果结束X和Y 的坐标。

2. BlendTrans:图像之间的淡入和淡出的效果

BlendTrans(Duration=?)

Duration:淡入或淡出的时间。

注意:这个滤镜必须配合JS建立图片序列,才能做出图片间效果。

3. Blru:建立模糊效果

Blur(Add=?, Direction=?, Strength=?)

Add:是否单方向模糊,此参数是一个布尔值,true(非0)或false(0)。

Direction:设置模糊的方向,其中0度代表垂直向上,然后每45度为一个单位。

Strength:代表模糊的象素值。

4. Chroma:把指定的颜色设置为透明

Chroma(Color=?)

Color:是指要设置为透明的颜色。

5. DropShadow:建立阴影效果

DropShadow(Color=?, OffX=?, OffY=?, Positive=?)

Color:指定阴影的颜色。

OffX:指定阴影相对于元素在水平方向偏移量,整数。

OffY:指定阴影相对于元素在垂直方向偏移量,整数。

Positive:是一个布尔值,值为true(非0)时,表示为建立外阴影;为false(0),表示为建立内阴影。

6. FlipH:将元素水平反转

7. FlipV:将元素垂直反转

8. Glow:建立外发光效效果

Glow(Color=?, Strength=?)

Color:是指定发光的颜色。 Strength:光的强度,可以是1到255之间的任何整数,数字越大,发光的范围就越大。

9. Gray:去掉图像的色彩,显示为黑白图象

10. Invert:反转图象的颜色,产生类似底片的效果

11. Light:放置光源的效果,可以用来模拟光源在物体上的投影效果

注意:此效果需要用JS设置光的位置和强度。

12. Mask:建立透明遮罩

Mask(Color=?)

Color:设置底色,让对象遮住底色的部分透明。

13. RevealTrans:建立切换效果

RevealTrans(Duration=?, Transition=?)

Duration:是切换时间,以秒为单位。

Transtition:是切换方式,可设置为从0到23。

注意:如果做页面间的切换效果,可以在<head>区加上一行代码:<Meta http-equiv=Page-enter content=revealTrans(Transition=?,Duration=?) >。如果用在页面里的元素必须配合JS使用。

14. Shadow:建立另一种阴影效果

Shadow(Color=?, Direction=?)

Color:是指阴影的颜色。

Direction:是设置投影的方向,0度代表垂直向上,然后每45度为一个单位。

15. Wave:波纹效果

Wave(Add=?, Freq=?, LightStrength=?, Phase=?, Strength=?)

Add:表示是否显示原对象,0表示不显示,非0表示要显示原对象。

Freq:设置波动的个数。

LightStrength:设置波浪效果的光照强度,从0到100。0表示最弱,100表示最强。

Phase:波浪的起始相角。从0到100的百分数值。(例如:25相当于90度,而50相当于180度。)

Strength:设置波浪摇摆的幅度。

16. Xray:显现图片的轮廓,X光片效果

注意:在使用CSS滤镜时,必须使用在有区域的元素,比如表格,图片等。而文本,段落这样没有区域的元素不能使用CSS滤镜,对这样的元素我们可以设置元素的Height和Width样式或坐标来实现。

看下面这个例子,我们对一行文字做阴影效果(dropshadow),新建自定义样式.shadow,在filter下拉框里选择“DropShadow(Color=?, OffX=?, OffY=?, Positive=?)”,我们设置为“DropShadow(Color=999999, OffX=2, OffY=2, Positive=1)”。然后把定义好的样式应用在页面中,我们发现在表格里的文字有了阴影,而段落里的文字却没有阴影。点CSS styles面板里的编辑样式表按钮,给样式加上Hight属性:

为了不影响原来对象的高度,我们设置的高度不能超过字体本身的高度。OK后,在浏览器中可以看到段落里的文字也有阴影了。

-->

下载本文
显示全文
专题