我們通常會通過PS，美圖秀秀等來編輯照片，製作比較符合意境的的效果圖片(圖騙)，但是編輯器和PS的切換是有成本的，如果能在編輯器中快捷並且批量的處理圖片豈不是很好。這篇文章沒有多麼高深的程式碼，只是一些平時容易忽略並且很受用的小技巧。
修圖利器之 CSS Filters
P圖怎麼能少了濾鏡呢，css提供了很多種濾鏡：
- drop-shadow
- sepia
- blur
- hue-rotate
- invert
- brightness
- contrast
- opacity
- grayscale
- saturate
drop-shadow 下落式陰影
新增陰影效果可不只有text-shadow和box-shadow哦，text-shadow是為文字新增陰影，box-shadow給一個元素新增陰影，drop-shadow在圖片是非png情況下和box-shadow有些相似,然而png圖片才是她大放異彩的地方
拿一張jpg圖片來舉個例子看下drop-shadow 和 box-shadow的區別：
|
1 2 3 4 5 6 7 |
//從左往右依次是原圖，新增drop-shadow-jpg，新增box-shadow .drop-shadow-jpg{ -webkit-filter: drop-shadow(10px 10px 10px rgba(255,235,59,0.74)); } .box-shadow{ box-shadow: 10px 10px 10px rgba(255,235,59,0.74); } |
drop-shadow明顯更柔和一些，並且圖片的上面和左邊也是有陰影的哦。
再來看下drop-shadow在png圖片的表現吧，左邊為原圖：
|
1 2 3 |
.drop-shadow-png{ -webkit-filter: drop-shadow(10px 10px 10px rgba(255,235,59,0.74)); } |
因為png圖片背景是透明的，所以drop-shadow直接作用於圖片的內容，圖中的小女孩是不是更萌了呢。
sepia 烏賊墨，深褐色，深棕色影
如果想要個老照片效果
|
1 2 3 4 5 6 7 |
.sepia-50{ -webkit-filter: sepia(50%); } .sepia-100{ -webkit-filter: sepia(100%) } //safari瀏覽器不支援 |
引數可以是小數也可以是百分比，為0的時候是左邊原圖的效果，1或100%是最右的效果圖哦
blur 模糊
背景圖片太清晰有喧賓奪主之嫌了？可以設定模糊的效果啊
|
1 2 3 |
.blur{ -webkit-filter: blur(3px); } |
blur用來給影像設定高斯模糊。引數值設定高斯函式的標準差，或者是螢幕上以多少畫素融在一起，這個值設定為百分比除外的css長度值，預設是0效果為左邊的原圖，值越大越模糊，上面的圖片設定成100px時就什麼都沒有了。
opacity 透明度
opacity會調整圖片的透明度，這個和filter中的opacity效果是一樣噠，但是並不是一個屬性呢，因為他們是可以疊加使用的
|
1 2 3 4 5 6 7 8 9 10 |
.opacity-20{ opacity: 0.2; } .filter-opacity-20{ filter:opacity(0.2) } .opacity-both{ opacity: 0.2; filter:opacity(0.2) } |
他們接受的引數也是有一些差別的，opacity只能接受小數，filter:opactiy()既可以接受小數也可以接受百分比，值越小越透明。
hue-rotate 色相旋轉
hue-rotate通過改變圖片的色相來改變圖片
|
1 2 3 4 5 6 |
.hue-rotate-90{ -webkit-filter: hue-rotate(90deg); } .hue-rotate-270{ -webkit-filter: hue-rotate(270deg); } |
hue-rotate 引數是一個角度值，他會接受這個值並把圖片中的顏色的色相做對應的旋轉
invert 反轉
invert會把圖片上的所有顏色進行反轉，如果是希望做個相機底片效果，真的是太合適了
|
1 2 3 4 5 6 |
.invert-20{ filter: invert(20%); } .invert-100{ filter: invert(100%) } |
和hue-rotate相比，直接反轉就用不著接受顏色變化的角度了，但是你可以設定0~100%來控制反轉的程度
saturate 飽和度
色彩三要素色相，明度，飽和度。飽和度也即顏色的純度，彩度。無彩色的色飽和度為0，也就是上面的grayscale灰度值為1的時候,飽和度越高，顏色中的灰度越低。
|
1 2 3 4 5 6 |
.saturate-50{ filter: saturate(50%); } .saturate-200{ filter: saturate(200%); } |
飽和度100%時為左一原圖，接受大於100%的值。
brightness 亮度
說完了色相和飽和度再來看看brightness,brightness給圖片應用一種線性乘法來調整整個圖片的亮度，效果和手機電腦上的的亮度調節是一樣的
|
1 2 3 4 5 6 |
.brightness-4{ filter:brightness(40%) } .brightness-8{ filter:brightness(80%) } |
brightness的引數可以用百分比來表示也可以用小數來表示，當引數值為0的時候整個圖片都是黑色的了,超過100%的時候比原圖更亮一些
contrast 對比度
contrast用來調整影像的對比度
|
1 2 3 4 5 6 |
.contrast-50 { filter: contrast(50%) } .contrast-200{ filter:contrast(200%) } |
contrast的引數接受百分比形式的數值也接受小數形式的，值為0 的時候是整個圖片都是灰黑色的，為1時是原圖，值越大對比度越大，預設值為1。
grayscale 灰度模式
有格調的灰度模式開啟
|
1 2 3 4 5 6 |
.gray-scale-50{ filter:grayscale(50%) } .gray-scale-100{ filter:grayscale(100%) } |
grayscale的引數接受百分比和小數，預設引數是100%，完全灰度，1以內的值越大越靠近完全灰度，大於等於1的值的效果是一樣噠
修圖利器之 Blend Modes
CSS3的混合模式決定了多個圖片/圖層疊加在一起的時候顯示的效果。關於混合模式的演算法可以在維基百科上了解。不同的模式值對應了不同的演算法，最後決定了圖片混合模式效果。相關的兩個屬性是mix-blend-mode和background-blend-mode，background-blend-mode主要是作用於同一個background屬性下的背景圖片或者背景色。
混合模式的值的對應效果可以完全類比PS中圖層模式效果，他們的對應關係是：
- normal 正常模式
- multiply 正片疊底模式
- screen 濾色模式
- overlay 疊加模式
- darken 變暗模式
- lighten 變亮模式
- color-burn 顏色加深模式
- hard-light 強光模式
- soft-light 柔光模式
- difference 差值模式
- exclusion 排除模式
- hue 色相模式
- saturation 飽和度模式
- color 顏色模式
- luminosity 亮度模式
mix-blend-mode 式
mix-blend-mode主要作用是把目標元素和其下方的背景元素混合。
圖片來自於caniuse.com
快速開始：
這是兩張原圖
|
1 2 3 |
<code><div class="mix-blend-mode"> <img src="./images/girl.jpg" alt="girl.jpg"/><img src="./images/minion.jpg" alt="minion.jpg"/></div> </code> |
|
1 2 3 4 5 6 7 |
/*讓兩張圖片重疊在一起*/ .mix-blend-mode{ position:relative } .mix-blend-mode img{ position:absolute } |
然後就可以給小黃人圖片新增mix-blend-mode啦，因為小女孩圖片排在小黃人下面，所以如果給小女孩圖片新增效果的話是看不到任何效果的。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
.mix-normal{ mix-blend-mode: normal; } .mix-color{ mix-blend-mode: color; } .mix-color-burn{ mix-blend-mode:color-burn; } .mix-color-dodge{ mix-blend-mode: color-dodge; } .mix-darken{ mix-blend-mode: darken; } .mix-difference{ mix-blend-mode: difference; } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
.mix-exclusion{ mix-blend-mode: exclusion; } .mix-hard-light{ mix-blend-mode: hard-light; } .mix-hue{ mix-blend-mode: hue; } .mix-inherit{ mix-blend-mode: inherit; } .mix-initial{ mix-blend-mode: initial; } .mix-lighten{ mix-blend-mode: lighten; } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
.mix-luminosity{ mix-blend-mode: luminosity; } .mix-overlay{ mix-blend-mode: overlay; } .mix-saturation{ mix-blend-mode: saturation; } .mix-screen{ mix-blend-mode: screen; } .mix-soft-light{ mix-blend-mode: soft-light; } .mix-unset{ mix-blend-mode: unset; } |
新增了mix-blend-mode屬性的圖片除了可以對其下面的圖片疊加，還可以對其背景色疊加，左一為原圖，依次給右邊4張圖片新增下面css中的樣式，並且給他們的父元素設定藍色背景，然後，各種藝術形態的小黃人出現了！
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.mix-background-lighten{ mix-blend-mode: lighten; } .mix-background-screen{ mix-blend-mode: screen; } .mix-background-difference{ mix-blend-mode: difference; } .mix-background-luminosity{ mix-blend-mode: luminosity; } |
background-blend-mode
相容性如下：
圖片來自於caniuse.com
background-blend-mode顧名思義是作用於background-image，background-color的。並且是寫在一個background屬性後面的圖片，顏色哦。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
.background-blend-mode-self{ background: url(./images/g.jpg) #673AB7 no-repeat; background-blend-mode: unset; } .background-blend-mode-color{ background: url(./images/g.jpg) #673AB7 no-repeat; background-blend-mode: screen; } .background-blend-mode-luminosity{ background: url(./images/g.jpg) #673AB7 no-repeat; background-blend-mode: luminosity; } .background-blend-mode-exclusion{ background: url(./images/g.jpg) #673AB7 no-repeat; background-blend-mode: exclusion; } .background-blend-mode-overlay{ background: url(./images/g.jpg) #673AB7 no-repeat; background-blend-mode: overlay; } .background-blend-mode-soft-light{ background: url(./images/g.jpg) #673AB7 no-repeat; background-blend-mode: soft-light; } |
篇幅有限，其他的background-blend-mode效果就不貼程式碼啦。
程式碼地址
參考文獻
其實這些功能綜合運用會有很神奇的效果，後續會寫文章介紹噠。