滤镜说明:

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)" 
说明:
Opacity:起始值,取值为0~100, 0为透明,100为原图。
FinishOpacity:目标值。
Style:1或2或3
StartX:任意值
StartY:任意值
例子:filter:Alpha(Opacity="0",FinishOpacity="75",Style="2") 

2、滤镜:blur

语法:STYLE="filter:Blur(Add = add, Direction = direction, Strength = strength)"
说明:
Add:一般为1,或0。
Direction:角度,0~315度,步长为45度。
Strength:效果增长的数值,一般5即可。
例子:filter:Blur(Add="1",Direction="45",Strength="5")

3、滤镜:Chroma

语法:STYLE="filter:Chroma(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。
例子: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)"
说明:
Color:发光颜色。
Strength:强度(0-100)
例子: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度。
例子:filter:Shadow (Color="#6699CC", Direction="135")

12、滤镜:wave

语法:filter: Wave(Add=add,Freq=freq,LightStrength=strength,Phase=phase,Strength=strength)
说明:
Add:一般为1,或0。
Freq:变形值。
LightStrength:变形百分比。
Phase:角度变形百分比。
Strength:变形强度。
例子:filter: wave(Add="0", Phase="4", Freq="5", LightStrength="5", Strength="2")

13、滤镜:Xray

语法:STYLE="filter:Xray" 
例子:filter:Xray

转载于:https://www.cnblogs.com/moyuling/p/4571085.html

filter在CSS中的效果相关推荐

  1. html 实现格子效果,CSS中网格效果的实现方案

    网络效果如下所示: 网格效果示例.png 在CSS中,网格效果的应用还是很广泛的,比如:棋盘格效果.参考线效果等等: 在CSS中实现颜色突变的效果有多种方案,如下: 方案1:table样式 这个方案的 ...

  2. filter 在CSS用的效果

    滤镜说明: Alpha:设置透明层次 blur:创建高速度移动效果,即模糊效果 Chroma:制作专用颜色透明 DropShadow:创建对象的固定影子 FlipH:创建水平镜像图片 FlipV:创建 ...

  3. html中菜单触碰变色,利用css filter实现菜单图片变色效果

    需求场景 在制作菜单时,未增加响应效果,往往会加入鼠标移入移出时字体和图标进行变色的效果,字体的颜色变化比较好控制,通过color便可以设置,但如果图标是使用的图片,往往要一个图标制作两份不同颜色的图 ...

  4. CSS中如何实现背景图片透明并且固定和文字不透明效果

    设置背景图片的透明度,并且该背景图片不随鼠标滚动而移动,我们可以使用滤镜filter中的透明度设置opacity,并使用伪类before和定位 至于opacity的作用:转化图像的透明程度.值定义转换 ...

  5. css中在图片上加透明,css 给图片添加滤镜效果,透明层毛玻璃效果

    我们用的第一个滤镜是sepia(),他会给图片增加一整降饱和度的橙色染色效果 原图 添加sepia滤镜的效果 img{ width:100%; transition: .5s filter; filt ...

  6. html5 css透明效果,css中实现背景透明的三种方式

    css中实现背景透明通常有如下3种方式,以下是这三种方式的不透明度为80%的写法: css3的opacity:x,x 的取值从 0 到 1,如opacity: 0.8 css3的rgba(red, g ...

  7. css透明饱和度,css中filter:alpha透明度使用

    css中filter:alpha透明度使用 使用filter可以设置透明度,filter:alpha在IE下是没有问题的,要支持firefox就需要使用-moz-opacity,下面有个不错的示例,大 ...

  8. CSS磨砂玻璃穿透效果 filter: blur(4px);

    文章目录 一.参考 二.问题描述 三.原理说明 四.项目代码说明 一.参考 纯CSS教你实现磨砂玻璃背景效果(附代码) 二.问题描述 工作中,UCD 设计了一个"磨砂穿透"的效果, ...

  9. 用CSS Filter 可以实现相同的效果

    用CSS Filter 可以实现相同的效果,而且可以省去图片,代码如下: <table width="100%" height="133"  border ...

  10. html 载入中,用纯CSS实现加载中动画效果

    今天要介绍的是用简单的CSS--只用CSS,不用Gif--制作"加载中-"动画效果.先看看效果: 上面的这个加载中效果,以前是用gif动图实现的,但随着CSS的进步,CSS动画功能 ...

最新文章

  1. 【C++】random随机数与【C++11】/rand()和srand()的用法
  2. MPB:北大口腔陈峰、陈智滨等-​口腔微生物组研究主要取样部位及方法
  3. 201521123024 《Java程序设计》 第九周学习总结
  4. WCF项目的架构设计
  5. 数据存储和云安全是选择云服务的关键
  6. qq2440 cs8900移植
  7. GraphQL及元数据驱动架构在后端BFF中的实践
  8. MMKV集成与原理,轻松拿下offer
  9. 28 PP配置-生产车间控制-工序-定义报工屏幕默认值
  10. 源码网络-推荐精品×××站
  11. java string不为空_java如何正确判断String为空
  12. mvc图片上传到服务器
  13. 愤怒的小鸟4只编外鸟_幼儿园小班游戏教案小鸟找食
  14. paip.hibernate list 返回位null的解决
  15. 设计模式:Builder模式
  16. 一到十二月英文 音标 简写
  17. SAS硬盘-神级高性能硬件盘点
  18. Android 端发送邮件
  19. BUUCTF Reverse reverse3 WriteUp
  20. ChainZ Arena攻略+全红卡评分

热门文章

  1. mysql多库备份_Mysql 之多库备份
  2. python 怎么注释_python的代码怎么写注释
  3. Linux的java配置及tomcat的启动
  4. Java Script之创建对象
  5. Spring之获得Bean本身的id
  6. 【Python实例第19讲】图像分割的谱聚类
  7. VC++学习方法及书籍推荐(转)
  8. Lecture 5:无模型控制
  9. C#知识点:操作XML
  10. [转]OPENGL中GLU和GLUT工具箱