原圖：

原圖.png

a. 圖像高斯模糊

  -webkit-filter:blur(4px);      
  // 范圍隨便寫就行，記得加px 

高斯模糊.png

b. 圖片進(jìn)行棕褐色處理

  -webkit-filter:sepia(1);      
  // 處理范圍是0-1或者0%-100%

棕褐色處理.png

c. 圖片灰色處理

  -webkit-filter:grayscale(1);   
  // 范圍是 0-1或者0%-100%

灰色處理.png

d. 圖片反色處理

  -webkit-filter:invert(1);      
  // 范圍是 0-1或者0%-100%

反色處理.png

e. 圖像飽和度調(diào)節(jié)

  -webkit-filter:saturate(30);   
  // 范圍是 取值范圍>=0數(shù)字或百分比 1為無效果，0為灰度圖

飽和度調(diào)節(jié).png

f. 圖像對(duì)比度調(diào)節(jié)

  -webkit-filter:contrast(90);   
  // 取值范圍>=0數(shù)字或百分比 1為無效果

對(duì)比度調(diào)節(jié).png

g. 圖像亮度調(diào)節(jié)

  -webkit-filter:brightness(3);   
  // 取值范圍>=0數(shù)字或百分比 1為無效果

亮度調(diào)節(jié).png

h. 圖像色相旋轉(zhuǎn)

  -webkit-filter:hue-rotate(300deg);   
  // 取值范圍0deg-365deg, 0默認(rèn)值，為無效果

色相旋轉(zhuǎn).png

i. 陰影濾鏡

  -webkit-filter:drop-shadow(5px 5px 3px #333);   
  // 取值范圍0deg-365deg, 0默認(rèn)值，為無效果

陰影濾鏡.png