圖文詳解CSS3中filter濾鏡屬性的使用（實例程式碼）

最近在網路上偶然發現了一個特別牛逼的屬性，就是CSS3中的filter濾鏡屬性，這個屬性可以改變圖片的顏色，一張圖片可以呈現多種效果，接下來就跟大家介紹CSS3中的filter過濾器的使用方法，以及實例示範filter濾鏡的效果，有興趣的朋友繼續往下看吧。

很多人不知道CSS filter是什麼意思。 filter通俗講就是指濾鏡，官方定義filter屬性可以設定元素(通常是)的可視效果(例如：模糊與飽和度)。

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

使用方法：時直接為需要設定的圖片新增filter屬性就可以了。

可以看到它的屬性有很多可選值，接下來簡單介紹一下他們的意思

1、grayscale灰階

2、sepia褐色（有種復古的舊照片感覺）

3、saturate飽和度

4、hue-rotate色相旋轉

5、invert反色

##6、opacity透明度

7、brightness亮度

8、contrast對比

9、blur模糊

10、drop-shadow陰影

#實例示範1：

用filter濾鏡屬性將影像轉換為灰階影像，而值就是轉換的比例。當值為100%時完全轉為灰階影像，當值為0%時影像無變化，當數值在0%到100%之間時，則在完全灰階和原圖之間。這個範例中將灰階grayscale設定為50%

HTML程式碼：

<img  src="/static/imghw/default1.png"  data-src="img/草莓.jpg"  class="lazy"      style="max-width:90%" height="192px"/ alt="圖文詳解CSS3中filter濾鏡屬性的使用（實例程式碼）" >

CSS程式碼：

img {
	 -webkit-filter: grayscale(50%); /* Chrome, Safari, Opera */
	filter: grayscale(50%);
    }

 效果圖：

前一個是原圖，後面一個是設定了50%灰階呈現的效果。

實例示範2：

用filter濾鏡屬性將影像設為高斯模糊，"radius"一值設定高斯函數的標準差，或是螢幕上以多少像素融在一起， 所以值越大越模糊；如果沒有設定值，則預設是0；這個參數可設定css長度值，但不接受百分比值。

img {
	 -webkit-filter: blur(1.5px); /* Chrome, Safari, Opera */
    	filter: blur(1.5px);
    }

效果圖：

這個範例中，將blur設為1.5px，讓圖片有高斯模糊的效果，如圖所示。

總結：以上介紹了CSS3中圖片濾鏡屬性filter的使用方法，他有很多的屬性值，這裡只做了兩個示範，至於其他的屬性，小夥伴們可以自己動手嘗試，說不定有意想不到的效果。

以上是圖文詳解CSS3中filter濾鏡屬性的使用（實例程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！