简单,常用,基础的css滤镜效果!

六眼飞鱼酱① 提交于 2019-12-02 15:07:14

第一次写博客,有些紧张。如写的不好,尽请谅解!  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);

 

最后,笔者希望大家都能在我的这篇博客中获得自己想要的知识点,多谢观看哪!

若还有什么疑虑的地方,可以参考菜鸟教程

 

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!