css filter 滤镜

注意： Internet Explorer 不支持 filter 属性。

//原图
<img src="pineapple.jpg" alt="Pineapple" width="300" height="300">

<img class="blur" src="pineapple.jpg" alt="Pineapple" width="300" height="300">
filter: blur(4px)//图2
filter: brightness(0.30)//图3
filter: contrast(180%)//图4
filter: grayscale(100%)//图5
filter: hue-rotate(180deg)//图6
filter: invert(100%)//图7
filter: opacity(50%)//图8
filter: saturate(7)//图9
filter: sepia(100%)//图10
filter: drop-shadow(8px 8px 10px green)//图11

属性效果可以叠加