彻底弄懂css filter滤镜 === 使用filter将彩色图片变成黑白彻底弄懂css filter滤镜 === 使

彻底弄懂css filter滤镜 === 使用filter将彩色图片变成黑白

[TOC]

HSL色彩模型

色相（HUE）：在基础色轮上分布的颜色，也称为纯色，纯色是不含黑、白、灰的颜色。
饱和度（SATURATION）：是指颜色的鲜亮程度， 在纯色中加入灰色，会降低色彩的饱和度 。100%是纯色，没有灰色阴影。50%是50%的灰色，0%是完全灰色。下图是饱和度从100%到0%的变化。

明暗度（LIGHTNESS）：是指颜色的色彩的明暗程度， 在纯色中加入黑色或白色，会改变颜色的明暗度 。其中0%表示全暗（黑色），100%表示全明（白色），50%是即不明也不暗。

HSL色彩模型就是色相、饱和度和明暗度三者混合组成的颜色模型。表示为 hsla( hue , saturation , lightness )。

filter基础使用

filter CSS属性将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像，背景和边框的渲染。

filter属性的含义

brightness() 让图像更明亮或更暗淡， 0% 将创建全黑图像， 100% 展示原图，大于 100% 展示更明亮的图片效果。
contrast() 增加或减少图像的对比度，值是 0% 图像全灰图像，没有对比度。 100% 展示原图，大于 100% 展示对比度更高的图片效果。
saturate() 超饱和或去饱和输入的图像，值为 0% 则是完全不饱和，完全转为灰度图像，100% 展示原图，大于100% 则有更高的饱和度。
grayscale() 改变图像灰度，值在 0% 到 100% 之间，值为0%展示原图，值为 100% 则完全转为灰度图像。
blur() 模糊图像。传入值单位为px
drop-shadow() 给图片添加阴影，与box-shadow的属性值一样。
hue-rotate() 改变图整体色调，angle设定图像会被调整的色环角度值。值为 0deg 展示原图，大于 360deg 相当于又绕一圈。
invert() 反转图像颜色,值在 0% 和 100% 之间, 100% 的价值是完全反转。值为 0% 则图像无变化。
opacity() 改变图像透明度，值在 0% 和 100% 之间，值为 0% 则是完全透明，值为 100% 则图像无变化。
sepia() 将图像转为棕褐色，值在 0% 到 100% 之间，值为 100% 则完全是深褐色的，值为 0% 图像无变化。

filter函数使用方法

可以使用单个滤镜函数，也可是同时使用多个滤镜函数。

/* <filter-function> values 使用单个滤镜*/
filter: blur(5px);
/* Multiple filters 使用多个滤镜*/
filter: contrast(175%) brightness(3%);
/* Use no filter 不使用滤镜 */
filter: none;

filter各属性值效果

filter的应用实例

使用css的filter将彩色图片亮度降低之后，设置的border-radius会出现失效不起作用的情况
需求：用户在线头像为原始的彩色图片，离线将用户头像改为黑白色

原来的写法：

<image src="{{item.type=='add' ? 'http://h5.nn.w293.cn/ui/map/addMember.png' : item.iconPath}}" class="h40 w40 b-r100 bx {{item.online==0 ? ' unOnline' : ''}}" style="{{item.type!='add'&& currencyUserId==item.id ? 'border:2px solid #1CA2FC':''}};"></image>

发现class b-r100也就是border-radius:100px失效

改进方法：在image标签外面套一层view，在view上面降低暗度，这样圆角就有效果了

 <view class="h40 w40 {{item.online==0 ? ' unOnline' : ''}}">
      <image src="{{item.type=='add' ? 'http://h5.nn.w293.cn/ui/map/addMember.png' : item.iconPath}}" class="h40 w40 b-r100 bx" style="{{item.type!='add'&& currencyUserId==item.id ? 'border:2px solid #1CA2FC':''}};"></image>
</view>

css

.unOnline{
    filter: grayscale(100%); 
   -webkit-filter: grayscale(100%);
   /* -webkit-filter: brightness(0.30);
   filter: brightness(0.30); */
}

或者：给image的父元素即view使用border-radius,image设置filter