15.CSS滤镜filter:(filter属性不属于w3c标准,只对IE有效)
--- ①不透明度:
filter:alpha(参数1=参数值, 参数2=参数值, . . .);
参数:
-- opacity:开始时的透明度,取值范围为0-100,默认值为0,即为完全透明,100为完全不透明;
-- finishopacity:结束是的透明度,取值为0-100;
-- style:设置渐变的样式,其中0表示无渐变,1为直线渐变,2为圆形渐变,3为矩形渐变;
-- startx:设置透明渐变的开始点的水平坐标。其参数值作为对象宽度的百分比处理,默认值为0;
-- starty:设置透明渐变的开始点的垂直坐标;
-- finishx:设置透明渐变的结束点的水平坐标;
-- finishy:设置透明渐变的结束点的垂直坐标。
--- ②动感模糊blur:
filter:blur(add=参数值, direction=参数值, strength=参数值);
参数:
-- add:设置是否显示原始图片,取值为true或false;
-- direction:设置动感模糊的方向,按顺时针的方向以45度为单位进行累积;
-- strength:设置动感模糊的强度,只能使用整数来指定默认是5个。
--- ③对颜色进行透明处理chroma:
filter:chroma(color=颜色值);
参数:
-- color:需要进行透明处理的颜色值。
--- ④阴影效果dropShadow:
filter:dropShadow(color=阴影颜色, offX=参数值, offY=参数值, positive=参数值);
参数:
-- color:阴影的颜色;
-- offX:阴影相对原始图像的移动的水平距离;
-- offY:阴影相对原始图像的移动的垂直距离;
-- positive:设置 阴影是否透明,1或0。
--- ⑤对象翻转flipH、flipV:
flipH滤镜用于设置沿水平方向翻转对象,flipV滤镜用于设置沿垂直方向翻转对象。
filter:flipH;
或
filter:flipV;
--- ⑥发光效果glow:
用于设置在对象周围产生发光的效果。
filter:Glow(color=颜色, strength=强度值);
参数:
-- color:设置发光的颜色;
-- strength:设置光的强度。取值为1~255,默认值为5。
--- ⑦灰度处理gray:
用于把彩色图片中的色彩去掉,转换为黑白图片。
filter:Gray;
--- ⑧反相invert:
用于设置图片的反相,可以将图片的颜色,饱和度以及亮度完全反转过来。
filter:invert;
--- ⑨X光片效果xray:
用于制作类似X光片的效果。
filter:Xray;
--- ⑩遮罩效果mask:
用于为对象产生遮罩效果,可以做出像印章一样的效果。
filter:Mask(color=颜色);
参数:
-- color:颜色值。
--- ⑩①波形滤镜wave:
用于为对象内容创建波纹扭曲效果。
filter:wave(add=参数值, freq=参数值, lightstrength=参数值,phase=参数值, strength=参数值);
参数:
-- add:设置是否要把对象按照波形样式打乱,true或false;
-- freq:设置图片上的波浪数目;
-- lightstrength:设置波浪的光照强度,取值为0~100;
-- phase:设置波浪的起始位置;
-- strength:波浪的强度大小。
相关文章
- 02-24CSS3笔记003 - 第03章 字体样式
- 02-24《CSS世界》笔记四:流的保护与破坏
- 02-24前端学习笔记--CSS布局--层定位
- 02-24【手写笔记】服务器上配置环境+nginx启动+配置安全组+测试html+wget+爬虫+上传文件scp+rsync+网页+更改域名+看自己的ip+爬虫项目+asca+shell编程+
- 02-24CSS3笔记005 - 第05章 边框样式
- 02-24HTML学习笔记之类、布局、响应式设计(九)
- 02-24学习笔记(01):8小时学会HTML网页开发-附录⑤ oveflow溢出处理
- 02-24div背景css样式笔记
- 02-24HTML Favicon 笔记
- 02-24移动端CSS样式----笔记