DaZeng：CSS3滤镜filter

前言

每天一个知识点，今天的我又来记录了。说实话是第一次看到这个东西，需求是怎样的呢？大致就是做一个图标是这样的但是UI提供的图片是此时就引入了滤镜这个东西。

使用

引入图片

<view class="exp">
  <image src='/images/ico_alert.png'></image>
</view>

设置样式

.exp>image {
  height: 36rpx;
  width: 36rpx;
  filter: grayscale(100%) opacity(30%);
}

原理

详情见文档：CSS3 filter(滤镜)属性

此处用的grayscale就是灰度opacity就是透明度：

grayscale(%)：将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0。
opacity(%)：值为0%则是完全透明，值为100%则图像无变化。默认值1.

blur(px)：高斯模糊值越大越模糊，默认0。
brightness(%)：亮度。如果值是0%，图像会全黑。值是100%，则图像无变化。值超过100%也是可以的，图像会比原来更亮。默认是1。
contrast(%)：对比度。值是0%的话，图像会全黑。值是100%，图像不变。值可以超过100%，意味着会运用更低的对比。若没有设置值，默认是1。
hue-rotate(deg)：给图像应用色相旋转。值为0deg，则图像无变化。若值未设置，默认值是0deg。该值虽然没有最大值，超过360deg的值相当于又绕一圈。
invert(%)：反转输入图像。100%的价值是完全反转。值为0%则图像无变化。 若值未设置，值默认是0。
saturate(%)：转换图像饱和度。值为0%则是完全不饱和，值为100%则图像无变化。超过100%的值是允许的，则有更高的饱和度。 若值未设置，值默认是1。
sepia(%)：将图像转换为深褐色。值定义转换的比例。值为100%则完全是深褐色的，值为0%图像无变化。若未设置，值默认是0。
drop-shadow(8px 8px 10px 2px red)：阴影水平和垂直方向偏移量；模糊度，值越大，越模糊，则阴影会变得更大更淡.不允许负值 若未设定，默认是0 (则阴影的边界很锐利)；阴影扩展度，正值会使阴影扩张和变大，负值会是阴影缩小.若未设定，默认是0 (阴影会与元素一样大小).；阴影颜色。

具体效果：