第一次写博客,有些紧张。如写的不好,尽请谅解! 2019-10-28 09:33:48
第一:透明度滤镜
该滤镜的效果其实跟调整透明度差不多。它总共有7个参数!语法如下!(摈弃那些花里胡哨,我们只需要第一个参数就行了!)
filter:alpha(opacity=不透明度,finishopacity=结束时不透明度,style=形状特征,startX=开始横坐标,startY=开始纵坐标,finish=X=结束横坐标,finishY=结束纵坐标);
在这里解释一下:style有4个参数:数值为0时表示匀速渐进,数值为1时表示线性渐进,为2时表示放射渐进,为3时表示直角渐进。
案例:filter:alpha(opacity=0.4)
第二:模糊滤镜
该滤镜的效果就是对照片进行模糊。它总共有1个参数!语法如下!
filter:blur(模糊程度);参数为像素,在0-10px之间,大于10px就没效果,0px和10px时模糊程度为0,在1-9px数值越大模糊程度越大!
案例:filter:blur(3px);
第三:灰度滤镜
该滤镜的效果就是对照片进行灰度调整,使其看起来像回忆照的效果。它总共有1个参数!语法如下!
filter:grayscale(灰度大小);参数为0-1或者0%-100%之间.参数值越大,灰度值越大!
案例:filter:grayscale(0.4);
第四:sepia(褐色)滤镜
该滤镜的效果就是对照片进行褐色程度调整,使其看起来像老照片。它总共有1个参数!语法如下!
filter:sepia(褐色程度大小);参数为0-1或者0%-100%之间.参数值越大,褐色值值越大!
案例:filter:sepia(1);
第五:brightness(亮度)滤镜
该滤镜的效果就是对照片进行光亮程度调整。它总共有1个参数!语法如下!
filter:brightness(亮度大小);它的参数分为几部分,0-1或0%-100%之间是在原图的基础上暗沉图片,数值越小,图片越暗,0时全黑;2-10之间是在原图的基础上调高图片亮度,10时全白!
案例:filter:brightness(2);
第六:hue-rotate(色相)滤镜
该滤镜的效果就是对照片调整色相。它总共有1个参数!语法如下!
filter:hue-rotate(色相角度)。它的参数为任何角度,具体什么角度什么色调我说不清,大家可以去实践了解
案例:filter:hue-rotate(300deg);
第七:invert(反色)滤镜
该滤镜的效果就是对照片反色调整。它总共有1个参数!语法如下!
filter:invert(反色参数)。它的参数为0-1或0%-100%之间。
案例:filter:invert(1);
第八:saturate(饱和度)滤镜
该滤镜的效果就是对照片饱和度调整。它总共有1个参数!语法如下!
filter:saturate(饱和度)。它的参数为0-1或1-10,0-1表示饱和度在原有的基础上降低,数值越小,越低,为1饱和度与原照片相等。1-10表示饱和度在原有的基础上增加,数值越高,饱和度越大,10封顶。
案例:filter:saturate(2);
第九:contrast(对比度)滤镜
该滤镜的效果就是对照片对比度进行调整。它总共有1个参数!语法如下!
filter:contrast(对比度值)。它的参数为0-1或1-10之间,和饱和度的原理差不多。
案例:filter:contrast(4);
第十:drop-shadow(阴影)滤镜
该滤镜的效果就是对照片反色调整。它总共有1个参数!语法如下!
filter:drop-shadow(横轴阴影大小 纵轴阴影大小 模糊半径 阴影颜色)。
案例:filter:drop-shadow(10px 10px 100px black);
最后,笔者希望大家都能在我的这篇博客中获得自己想要的知识点,多谢观看哪!
若还有什么疑虑的地方,可以参考菜鸟教程。