css3如何實現圖片的高斯模糊效果？ CSS3 Filter（濾鏡）實作（程式碼實例）

本章介紹用css3如何實現圖片的高斯模糊效果，CSS3 Filter（濾鏡）實現對圖片元素模糊處理；讓大家了解如何設定圖片元素的模糊效果，透過實例介紹filter實現圖片高斯模糊的三種效果。有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

一、什麼是filter （濾鏡）

#CSS3 Filter（濾鏡）屬性定義了元素(通常是)的可視效果，提供了模糊和改變元素顏色的功能。 CSS3 Fitler 常用於調整影像的渲染、背景或邊框顯示效果。

瀏覽器支援：

-webkit-filter是css3的屬性，Webkit率先支援了這幾個功能，感覺效果很不錯。

表格中的數字表示支援該方法的第一個瀏覽器的版本號碼。

緊接在數字後面的 -webkit- 為指定瀏覽器的前綴。

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

下面來看看filter這個屬性，現在規格支援的效果：

1. grayscale（灰階）：值為0-1之間的小數

2. sepia（褐色）：值為0-1之間的小數

3. #saturate（飽和度）：值為num

4. hue-rotate（色相旋轉）：值為angle

5. #invert（反色）：值為0-1之間的小數

6. opacity（透明度）：值為0-1之間的小數

7. #brightness（亮度）：值為0-1之間的小數

8. contrast（對比）：值為num

9. #blur（模糊）：值為length（radius）

# #drop-shadow（陰影）

實現模糊效果的filter 語法：

filter: blur();

二、圖片模糊的三種效果

原圖：

      
  
 
like window
 
  

      
  
 
like window
 
  

以上是css3如何實現圖片的高斯模糊效果？ CSS3 Filter（濾鏡）實作（程式碼實例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！