filter滤镜-白红宇

图片使用高斯模糊效果

-webkit-filter: blur(5px); /* Chrome, Safari, Opera */  filter: blur(5px);复制代码

使图片变亮

-webkit-filter: brightness(200%); /* Chrome, Safari, Opera */ filter: brightness(200%);复制代码

调整图像的对比度

-webkit-filter: contrast(200%); /* Chrome, Safari, Opera */    filter: contrast(200%);复制代码

给图像设置一个阴影效果

-webkit-filter: drop-shadow(8px 8px 10px red); /* Chrome, Safari, Opera */ filter: drop-shadow(8px 8px 10px red);复制代码

将图像转换为灰度图像

-webkit-filter: grayscale(100%); filter:grayscale(100%);复制代码

给图像应用色相旋转

-webkit-filter: hue-rotate(90deg); /* Chrome, Safari, Opera */  filter: hue-rotate(90deg);复制代码

反转输入图像

-webkit-filter: invert(100%); /* Chrome, Safari, Opera */  filter: invert(100%);复制代码

转化图像的透明程度:

-webkit-filter: opacity(30%); /* Chrome, Safari, Opera */  filter: opacity(30%);复制代码

转换图像饱和度

-webkit-filter: saturate(800%); /* Chrome, Safari, Opera */filter: saturate(800%);复制代码

将图像转换为深褐色

-webkit-filter: sepia(100%); /* Chrome, Safari, Opera */   filter: sepia(100%);复制代码