<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
<meta content="webkit" name="renderer">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<title>css濾鏡</title>
</head>
<body>
<div>
<h3>原圖</h3>
<img src="https://pic2.zhimg.com/80/v2-267217db1a16cf81a50184ea7d520289_720w.webp" />
<h3>高斯模糊濾鏡</h3>
<h5>為圖像設(shè)置高斯模糊，值越大越模糊， 默認(rèn)是0，既不模糊，值的單位是PX</h5>
<div style="overflow:hidden;width: 700px;">
<img style="filter: blur(10px);" src="https://pic2.zhimg.com/80/v2-267217db1a16cf81a50184ea7d520289_720w.webp" />
</div>
<h3>亮度調(diào)整濾鏡</h3>
<h5>通過(guò)設(shè)置brightness(%)來(lái)調(diào)整圖片的亮度，如果值為 0% 圖像會(huì)全黑，如果值為100%，圖像無(wú)變化，如果值為100%之上，圖像會(huì)變得更亮，默認(rèn)值是1</h5>
<div style="overflow:hidden;width: 700px;">
<img style="filter: brightness(40%);" src="https://pic2.zhimg.com/80/v2-267217db1a16cf81a50184ea7d520289_720w.webp" />
</div>
<h3>對(duì)比度調(diào)整濾鏡</h3>
<h5>通過(guò)設(shè)置contrast(%)來(lái)調(diào)整圖片的亮度, 單位可以是百分比 和 小數(shù) 表示，如果值為 0% 圖像會(huì)全黑，如果值為100%，圖像無(wú)變化，如果值為100%之上,圖像的對(duì)比度更加強(qiáng),意味著圖片的鮮艷度更強(qiáng)，圖片更加鮮艷了 白的更白,黑的更黑，默認(rèn)值是1 小于100%，可以看到圖片顏色灰度增加了</h5>
<div style="overflow:hidden;width: 700px;">
<img style="filter: contrast(40%);" src="https://pic2.zhimg.com/80/v2-267217db1a16cf81a50184ea7d520289_720w.webp" />
</div>
<h3>灰度濾鏡</h3>
<h5>通過(guò)設(shè)置grayscale(%)將圖片轉(zhuǎn)換成灰度圖片,值可以是小數(shù)和百分?jǐn)?shù).默認(rèn) 0，當(dāng)值超過(guò)100%時(shí)完全轉(zhuǎn)換成灰度圖片,當(dāng)值為0% 圖像無(wú)變化，默認(rèn)值是1</h5>
<div style="overflow:hidden;width: 700px;">
<img style="filter: grayscale(40%);" src="https://pic2.zhimg.com/80/v2-267217db1a16cf81a50184ea7d520289_720w.webp" />
</div>
<h3>圖像反轉(zhuǎn)濾鏡</h3>
<h5>上了點(diǎn)年紀(jì)的人一般見過(guò)膠卷相機(jī)，照片的底片那種效果其實(shí)就是圖片反轉(zhuǎn)效果。比如將黑色反轉(zhuǎn)成白色，其它顏色也反轉(zhuǎn)成其相反的顏色。使用invert(%)可以對(duì)其進(jìn)行控制，其值可以是0-1之間的小數(shù)或者百分比，默認(rèn)值為0。值為100%的時(shí)候是完全反轉(zhuǎn)，與0時(shí)圖像無(wú)變化。為50%的時(shí)候，所有色彩都變成灰色。</h5>
<div style="overflow:hidden;width: 700px;">
<img style="filter: invert(1);" src="https://pic2.zhimg.com/80/v2-267217db1a16cf81a50184ea7d520289_720w.webp" />
</div>
<h3>透明度調(diào)整濾鏡</h3>
<h5>和css設(shè)置元素透明度效果一樣,不過(guò)這個(gè)使用濾鏡實(shí)現(xiàn)的</h5>
<div style="overflow:hidden;width: 700px;">
<img style="filter: opacity(0.6);" src="https://pic2.zhimg.com/80/v2-267217db1a16cf81a50184ea7d520289_720w.webp" />
</div>
<h3>飽和度濾鏡</h3>
<h5>通過(guò)設(shè)置saturate(%)調(diào)整圖片的飽和度大小,
當(dāng)值超過(guò)100%時(shí)圖片飽和度增高,色彩就會(huì)變重.
當(dāng)值為0% 圖像完全不飽和
當(dāng)值為100% 圖像無(wú)變化</h5>
<div style="overflow:hidden;width: 700px;">
<img style="filter: saturate(1.6);" src="https://pic2.zhimg.com/80/v2-267217db1a16cf81a50184ea7d520289_720w.webp" />
</div>
<h3>復(fù)古濾鏡</h3>
<h5>將圖片調(diào)成深褐色
通過(guò)sepia(%)可以將圖像調(diào)整為深褐色，可以很容易的營(yíng)造出發(fā)黃、復(fù)古的效果。該函數(shù)的值為0-1之間的數(shù)字或者百分比，默認(rèn)值為0。當(dāng)值為100%時(shí)，圖像完全變成深褐色的，值為0%圖像無(wú)變化。</h5>
<div style="overflow:hidden;width: 700px;">
<img style="filter: sepia(100%);" src="https://pic2.zhimg.com/80/v2-267217db1a16cf81a50184ea7d520289_720w.webp" />
</div>
<h3>色相旋轉(zhuǎn)濾鏡</h3>
<h5>通過(guò)hue-rotate(deg)可以將圖像進(jìn)行色相旋轉(zhuǎn)。所謂色相旋轉(zhuǎn)，就是指將圖像中的各種顏色按照給定的角度在色相環(huán)中旋轉(zhuǎn)成新的對(duì)應(yīng)顏色。該函數(shù)默認(rèn)值是Odeg，其值可以上不過(guò)超過(guò)360deg相當(dāng)于又轉(zhuǎn)了一圈。</h5>
<div style="overflow:hidden;width: 700px;">
<img style="filter: hue-rotate(180deg);" src="https://pic2.zhimg.com/80/v2-267217db1a16cf81a50184ea7d520289_720w.webp" />
</div>
</div>
</body>
</html>說(shuō)到對(duì)圖片進(jìn)行處理，我們經(jīng)常會(huì)想到PS,美圖秀秀這類的圖像處理工具。作為前端,全棧開發(fā)者，我們經(jīng)常會(huì)需要處理一些特效，例如根據(jù)不同的狀態(tài)，讓圖片顯示不同的顏色?；蛘呤莌over的時(shí)候，對(duì)圖片的對(duì)比度，陰影進(jìn)行處理。
你以為這些是經(jīng)過(guò)PS軟件處理出來(lái)的？不不不，只有一張圖片,純粹的是用css寫出來(lái)的。
本文的目標(biāo)就是：手把手教大家學(xué)習(xí)CSS濾鏡（filter）屬性,CSS濾鏡提供的圖形特效，像模糊，銳化或元素變色。過(guò)濾器通常被用于調(diào)整圖片，背景和邊界的渲染。
使用CSS濾鏡只需要如下5步:
1. 準(zhǔn)備工作
2. 使用sublime快速書寫HTML結(jié)構(gòu)
3. 使用CSS選擇器選中目標(biāo)標(biāo)簽
4. CSS濾鏡的基本用法
5. CSS濾鏡實(shí)例演示
一、第一步 —— 準(zhǔn)備工作
目標(biāo) : 下載并安裝sublime以及準(zhǔn)備一張圖片素材
下載對(duì)應(yīng)你操作系統(tǒng)的sublime編輯器，http://www.sublimetext.com/3
圖片素材:
小結(jié) : 準(zhǔn)備好代碼編輯器,比如sublime,hbuilder,vscode等編輯,都是可以的,再準(zhǔn)備一張圖片素材
二、第二步 —— 書寫HTML結(jié)構(gòu)
目標(biāo) : 使用sublime編輯器快速生成HTML5結(jié)構(gòu)的頁(yè)面
1. 安裝sublime以后，并打開sublime.exe
2. 在電腦的某個(gè)目下新建一個(gè)空目錄code，將我們的圖片素材放一個(gè)images文件夾下，并把這個(gè)images文件夾也放在code中
3. 使用sublime打開我們剛準(zhǔn)備好的code文件夾
4. 使用sublime新建一個(gè)HTML網(wǎng)頁(yè)文件,后綴名需要為html
5. 接著輸入一個(gè)英文輸入狀態(tài)下的!再按tab鍵,即可快速生成HTML5的基本結(jié)構(gòu)!
6. 在網(wǎng)頁(yè)中插入內(nèi)容
小結(jié) : 使用代碼編輯器新建網(wǎng)頁(yè)文件,并加入兩張img圖片標(biāo)簽,正確引入圖片
三、第三步 —— 使用CSS選擇器選中目標(biāo)標(biāo)簽
目標(biāo)：使用CSS類選擇器選中我們頁(yè)面中的目標(biāo)圖片標(biāo)簽, 格式 .類名
小結(jié) : 使用 css類選擇 格式: .類名 選中對(duì)應(yīng)的目標(biāo)標(biāo)簽
四、第四步 —— CSS濾鏡的基本用法
目標(biāo)：了解CSS濾鏡的基本用法以及各方法之間效果差異
1. CSS濾鏡基本語(yǔ)法
filter: function(param);
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() ;
提示:允許同時(shí)使用多個(gè)濾鏡，多個(gè)濾鏡效果之間使用空格分隔。
2. CSS濾鏡支持的方法（function）有
– grayscale 灰度
– sepia 褐色
– saturate 飽和度
– hue-rotate 色相旋轉(zhuǎn)
– invert 反色
– opacity 透明度
– brightness 亮度
– contrast 對(duì)比度
– blur 模糊
– drop-shadow 陰影