滤镜 Filter

本文针对svg图像做处理,原图为:

素材地址:

模糊 blur

blur用来给图像设置高斯模糊。参数值设定高斯函数的标准差,或者是屏幕上以多少像素融在一起,这个值设置为百分比除外的css长度值,默认是0为原图,值越大越模糊,当值大于图片的宽高最大值时就什么都没了。

filter: blur(5px);

透明度 opacity

opacity会调整图片的透明度,这个和filter中的opacity效果是一样哒,但是并不是一个属性呢,因为他们是可以叠加使用的。

opacity只能接受小数,filter:opactiy()既可以接受小数也可以接受百分比,值越小越透明。

filter: opacity(.5);
opacity: .5; /*注意,可以和filter属性的opacity重叠,这里相当于是 .5 * .5 = .25 */

灰度 grayscale

grayscale为图片设置灰度,当值为100%时就成为完全的灰度图片了。

filter: grayscale(100%);

对比度 contrast

contrast的参数接受百分比形式的数值也接受小数形式的,值为0 的时候是整个图片都是灰黑色的,为1时是原图,值越大对比度越大,默认值为1。

filter: contrast(200%);

饱和度 saturate

饱度可以理解为图像的彩色程度,当为0%时就是一张灰度图了。

filter: saturate(50%);

亮度 brightness

亮度值默认值为1,大于1变亮,小于1变暗。

filter: brightness(50%);

阴影 drop-shadow

添加阴影效果可不只有text-shadow和box-shadow哦,text-shadow是为文字添加阴影,box-shadow给一个元素添加阴影,drop-shadow在图片是非png或svg情况下和box-shadow有些相似,然而png或svg图片才是她大放异彩的地方。

filter: drop-shadow(20px 20px 30px red);

老照片 sepia

使用sepia(深褐色)可以渲染出一张怀旧的照片。参数可以是小数也可以是百分比。

filter: sepia(100%);

色相 hue-rotate

hue-rotate 参数是一个角度值,他会接受这个值并把图片中的颜色的色相做对应的旋转。补基础: css里颜色的那些事儿(合法颜色值)

filter: hue-rotate(45deg);

反转 invert

invert会把图片上的所有颜色进行反转,如果值为100%,就做了个相机底片。

filter: invert(100%);

MIT Licensed | Copyright © 2018-present 滇ICP备16006294号

Design by Quanzaiyu | Power by VuePress