這篇文章將為大家詳細講解有關(guān)css3怎么實現(xiàn)圖片的高斯模糊效果，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

為雙河等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計制作服務(wù)，及雙河網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為成都網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計、雙河網(wǎng)站設(shè)計，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達到每一位用戶的要求，就會得到認可，從而選擇與我們長期合作。這樣，我們也可以走得更遠！

一、什么是filter （濾鏡）

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

瀏覽器支持：

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

表格中的數(shù)字表示支持該方法的第一個瀏覽器的版本號。

緊跟在數(shù)字后面的 -webkit- 為指定瀏覽器的前綴。

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

下面看看filter這個屬性，現(xiàn)在規(guī)范中支持的效果：

1. grayscale（灰度）：值為0-1之間的小數(shù)

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

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

4. hue-rotate（色相旋轉(zhuǎn)）：值為angle

5. invert（反色）：值為0-1之間的小數(shù)

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

7. brightness（亮度）：值為0-1之間的小數(shù)

8. contrast（對比度）：值為num

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

10. drop-shadow（陰影）

實現(xiàn)模糊效果的filter 語法：

filter: blur();

blur()給圖像設(shè)置高斯模糊。"length（radius）"一值設(shè)定高斯函數(shù)的標準差，或者是屏幕上以多少像素融在一起， 所以值越大越模糊；如果沒有設(shè)定值，則默認是0；這個參數(shù)可設(shè)置css長度值，但不接受百分比值。

二、圖片模糊的三種效果

原圖：

1.css普通圖片模糊效果（整張圖片全模糊）

效果圖：

2.css圖片局部模糊效果

	
		
		
		
	

	
		

			
like window
		
	

效果圖:

3.css圖片局部清晰效果

	
		
		
		
	

	
		

			
like window
		
	

效果圖：

關(guān)于css3怎么實現(xiàn)圖片的高斯模糊效果就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。