开发者社区> _莫非_> 正文

笔记 - 10.4、HTML - CSS滤镜笔记

简介: 15.CSS滤镜filter:(filter属性不属于w3c标准,只对IE有效) --- ①不透明度:     filter:alpha(参数1=参数值, 参数2=参数值, . . .);     参数:       -- opacity:开始时的透明度,取值范围为0-100,默认值为0,即为完全透明,100为完全不透明;       -- finishopacity:结束是的透
+关注继续查看
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:波浪的强度大小。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
「趣学前端」filter滤镜,CSS的PS特技
CSS之filter赏析,来show一波CSS的PS特技。
67 0
探究 CSS 混合模式\滤镜导致 CSS 3D 失效问题
探究 CSS 混合模式\滤镜导致 CSS 3D 失效问题
125 0
css3 filter滤镜属性使用
最近在修改内网门户的时候,恰好遇到了需要使用滤镜的地方;刚开始用的是两张图片;鼠标滑过背景变成渐变;图标切换;但是后台配置了图标后;导致鼠标滑过图标不能正常切换;于是就想到了滤镜的效果来处理。所以顺便学习了一下常用的滤镜效果。
211 0
CSS躬行记(6)——滤镜
 滤镜(filter)可改造元素的视觉呈现,CSS内置的滤镜有10种,通过SVG文件还能自定义滤镜。
81 0
CSS图片滤镜灰度
版权声明:本文首发 http://asing1elife.com ,转载请注明出处。 https://blog.csdn.net/asing1elife/article/details/82796602 ...
1246 0
+关注
_莫非_
文章
问答
视频
文章排行榜
最热
最新
相关电子书
更多
天猫HTML5互动技术实践
立即下载
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
相关实验场景
更多