CSS3 filter的使用（改變模糊度 亮度 透明等）

講到對圖片的處理，我們經常想到的就是Photoshop等類的圖像處理工具，其實css也可以很強大，作為一個前端開發我們也常常要做一些特效，比如根據不同的狀態顯示不同狀態的顏色，或者hover的時候等等。

     

　上面這些效果css一樣能做到

  CSS :filter

　CSS濾鏡（filter）屬提供的圖形特效，像模糊，銳化或元素變色。過濾器通常被用於調整圖片，背景和邊界的渲染。

　CSS標准里包含了一些已實現預定義效果的函數。

　語法     filter： none  |  blur()  |   brightness()   |   contrast()   |   drop-shadow()   |   grayscale()   |   hue-rotate()   |   invert()   |   opacity()   |   saturate()   |   sepia()   |   url();

 

　filter:blur(px)   給圖像設置高斯模糊

img{
    -webkit-filter: blur(2px);
    filter: blur(2px);
}

 

　filter:brightness(%)  給圖片應用一種線性乘法，使其看起來更亮或更暗。

img{
    -webkit-filter: brightness(0.30);
    filter: brightness(0.30);
}

　　

　filter:contrast(%)  調整圖像的對比度

img{
     -webkit-filter: contrast(180%);
     filter: contrast(180%);  
}

　　

　filter:grayscale(%)  將圖像轉換為灰度圖像

img{
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

　　

　filter:hue-rotate(%)  給圖像應用色相旋轉。

img{
    -webkit-filter: hue-rotate(180deg);
    filter: hue-rotate(180deg);
}

 

filter:invert(%)  反轉輸入圖像。

img{
    -webkit-filter: invert(100%);
    filter: invert(100%);
}

　　

filter:opacity(%)  給圖像應用色相旋轉。

img{
     -webkit-filter: opacity(50%);
     filter: opacity(50%);
}

　　

filter:saturate(%)  轉換圖像飽和度。

img{
-webkit-filter: saturate(7);
    filter: saturate(7); }

　　

filter:sepia(%)  將圖像轉換為深褐色。

img{
　　-webkit-filter: sepia(100%);
   filter: sepia(100%); }

　　

filter:shadow(%)  給圖像設置一個陰影效果。

img{
　　 -webkit-filter: drop-shadow(8px 8px 10px green);
    filter: drop-shadow(8px 8px 10px green); }

　結論：css3提供了filter這個屬性，使得前端更容易實現酷炫的特效

　瀏覽器支持

　緊跟在數字后面的 -webkit- 為指定瀏覽器的前綴

　

　注意: 舊版 Internet Explorer 瀏覽器(4.0 to 8.0) 支持的非標准 "filter" 屬性已被廢棄。 IE8 及更低版本瀏覽器通常使用 opacity 屬性。