CSS3中filter濾鏡屬性怎么用

小編給大家分享一下CSS3中filter濾鏡屬性怎么用，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

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

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="img/草莓.jpg" width="250px" height="192px"/>

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濾鏡屬性怎么用”有了一定的了解，如果想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！