邀朋友种豆,一起分享吧
喜欢购买正品行货?那就去品牌街

Css的14种滤镜详解

来自:种豆 时间:2017-12-29 阅读:727次 原文链接

一 滤镜语法

STYLE="filter:filtername(fparameter1, fparameter2...)"

其中:Filtername为滤镜的名称,fparameter1、fparameter2等是滤镜的参数。可参照《CSS滤镜语法

二 滤镜说明

Alpha:设置透明层次
blur:创建高速度移动效果,即模糊效果
Chroma:制作专用颜色透明
DropShadow:创建对象的固定影子
FlipH:创建水平镜像图片
FlipV:创建垂直镜像图片
glow:加光辉在附近对象的边外
gray:把图片灰度化
invert:反色
light:创建光源在对象上
mask:创建透明掩膜在对象上
shadow:创建偏移固定影子
wave:波纹效果
Xray:使对象变得像被x光照射一样

1、滤镜:Alpha

语法:STYLE="filter:Alpha(Opacity=opacity, FinishOpacity=finishopacity,Style=style, StartX=startX,StartY=startY,FinishX=finishX,FinishY=finishY)"

说明:"Alpha"属性是把一个目标元素与背景混合。设计者可以指定数值来控制混合的程度。这种“与背景混合”通俗地说就是一个元素的透明度。通过指定坐标,可以指定点、线、面的透明度。他们的参数含义分别如下:

参数:
Opacity:起始值,取值为0~100(百分比), 0代表完全透明,100代表完全不透明。
FinishOpacity:目标值。是一个可选参数,如果想要设置渐变的透明效果,就可以使用他们来指定结束时的透明度。范围也是0 到 100。
Style:指定了透明区域的形状特征。其中0代表统一形状、1代表线形、2代表放射状、3代表长方形。
StartX:任意值;代表渐变透明效果的开始X坐标。
StartY:任意值;代表渐变透明效果的开始Y坐标。
FINISHX“和”FINISHY“代表渐变透明效果结束X和Y 的坐标。

例子:filter:Alpha(Opacity="0",FinishOpacity="75",Style="2")

2、滤镜:blur

语法:STYLE="filter:Blur(Add = add, Direction = direction, Strength = strength)"
对于Script语言: [oblurfilter=] object.filters.blur

说明:用手指在一幅尚未干透的油画上迅速划过时,画面就会变得模糊。”Blur"就是产生同样的模糊效果。

参数:
Add:一般为1,或0;是一个布尔判断“TRUE(默认)”或者“FALSE”。它指定图片是否被改变成印象派的模糊效果。模糊效果是按顺时针的方向进行的
Direction:角度,0~315度,步长为45度。 参数用来设置模糊的方向。其中0度代表垂直向上,然后每45度为一个单位。它的默认值是向左的270度。
Strength:效果增长的数值,一般5即可。 代表有多少像素的宽度将受到模糊影响。默认是5个。对于网页上的字体,如果设置他的模糊”ADD=1“,那么这些字体的效果会非常好看的。

例子:
filter:Blur(Add="1",Direction="45",Strength="5")
filter:blur(add=ture,direction=135,strength=10)

3、滤镜:Chroma

语法:STYLE="filter:Chroma(Color = color)"
说明:属性可以设置一个对象中指定的颜色为透明色,参数COLOR即要透明的颜色。
color:#rrggbb格式,任意。
例子:filter:Chroma(Color="#FFFFFF")

4、滤镜:DropShadow

语法:STYLE="filter:DropShadow(Color=color, OffX=offX, OffY=offY, Positive=positive)"

说明:添加对象的阴影效果。其工作原理是建立一个偏移量,加上较深。

参数:
Color:#rrggbb格式,任意。代表投射阴影的颜色。
Offx:X轴阴影偏离值。
Offy:Y轴阴影偏离值。
Positive:1或0。 如果为“TRUE(非0)”,那么就为任何的非透明像素建立可见的投影。如果为“FASLE(0)”,那么就为透明的像素部分建立透明效果

例子:filter:DropShadow(Color="#6699CC",OffX="5",OffY="5",Positive="1")

5、滤镜:FlipH

说明:水平反转
语法:STYLE="filter:FlipH"
例子:filter:FlipH

6、滤镜:FlipV

说明:垂直反转
语法:STYLE="filter:FlipV"
例子:filter:FlipV

7、滤镜:glow

语法:STYLE="filter:Glow(Color=color, Strength=strength)"

说明: 当对一个对象使用"glow"属性后,这个对象的边缘就会产生类似发光的效果。

参数:
Color:发光颜色。
Strength:强度(1-255) 可以从1到255之间的任何整数来指定这个力度。

例子:filter:Glow(Color="#6699CC",Strength="5")

8、滤镜:gray

语法:STYLE="filter:Gray"
说明:把一张图片变成灰度图
例子:filter:Gray

9、滤镜:invert

语法:STYLE="filter:Invert"
说明:把对象的可视化属性全部翻转,包括色彩、饱和度、和亮度值
例子:filter:Invert

10、滤镜:mask

语法:STYLE="filter:Mask(Color=color)"
说明:为对象建立一个覆盖于表面的膜,其效果就象戴者有色眼镜看物体一样。
例子:filter:Mask (Color="#FFFFE0")

11、滤镜:shadow

语法:filter:Shadow(Color=color, Direction=direction)

说明:在指定的方向建立物体的投影

参数:
Color:#rrggbb格式;投影色。
Direction:角度,0-315度,步长为45度。 投影的方向。其中0度代表垂直向上,然后每45度为一个单位。它的默认值是向左的270度。

例子:filter:Shadow (Color="#6699CC", Direction="135")
filter:shadow(color=blue,direction=225)

12、滤镜:wave

语法:filter: Wave(Add=add,Freq=freq,LightStrength=strength,Phase=phase,Strength=strength)

说明: 把对象按垂直的波形样式打乱。默认是“TRUE(非0)”

Add:一般为1,或0。表示是否要把对象按照波形样式打乱
Freq:变形值。是波纹的频率,也就是指定在对象上一共需要产生多少个完整的波纹
LightStrength:变形百分比。对于波纹增强光影的效果,范围0----100
Phase:用来设置正弦波的偏移量。
Strength:变形强度。代表振幅大小
例子:filter: wave(Add="0", Phase="4", Freq="5", LightStrength="5", Strength="2")

13、滤镜:Xray

说明:让对象反映出它的轮廓并把这些轮廓加亮,也就是所谓的“X”光片。
语法:STYLE="filter:Xray"
例子:filter:Xray

14 Light 滤镜

语法:Filter{light}

说明:这个属性模拟光源的投射效果。一旦为对象定义了“LIGHT"滤镜属性,那么就可以调用它的“方法(Method)"来设置或者改变属性。

参数:
AddAmbient 加入包围的光源
AddCone 加入锥形光源
AddPoint 加入点光源
Changcolor 改变光的颜色
Changstrength 改变光源的强度
Clear 清除所有的光源
MoveLight 移动光源
可以定义光源的虚拟位置,以及通过调整X轴和Y轴的数值来控制光源焦点的位置,还可以调整光源的形式(点光源或者锥形光源)指定光源是否模糊边界、光源的颜色、亮度等属性。如果动态的设置光源,可能回产生一些意想不到的效果。后面几页会有具体范例。

 
关于种豆 ┊ 联系我们 ┊ 免责声明 ┊ 发帖须知 ┊ 请提意见 ┊ 站点地图
本站为个人爱好兴趣分享网站,不代表本人观点,如有侵权请联系QQ3371650278进行处理
sowsoy.com 版权所有 Copyright©2010-2020 浙ICP备10212932号
Email:sowsoy#hotmail.com