如何用 css 修出好看的照片

01-27

一摘要

我們通常會通過PS，美圖秀秀等來編輯照片，製作比較符合意境的的效果圖片(圖騙)，但是編輯器和PS的切換是有成本的，如果能在編輯器中快捷並且批量的處理圖片豈不是很好。這篇文章沒有多麼高深的代碼，只是一些平時容易忽略並且很受用的小技巧。

二修圖利器之 CSS Filters

P圖怎麼能少了濾鏡呢，css提供了很多種的濾鏡：

drop-shadow
sepia
blur
hue-rotate
invert
brightness
contrast
opacity
grayscale
saturate

2.1 drop-shadow 下落式陰影

添加陰影效果可不只有text-shadow和box-shadow哦，text-shadow是為文字添加陰影，box-shadow給一個元素添加陰影，drop-shadow在圖片是非png情況下和box-shadow有些相似,然而png圖片才是她大放異彩的地方

拿一張jpg圖片來舉個栗子看下drop-shadow 和 box-shadow的區別：

//從左往右依次是原圖，添加drop-shadow-jpg，添加box-shadown.drop-shadow-jpg{n -webkit-filter: drop-shadow(10px 10px 10px rgba(255,235,59,0.74));n}n.box-shadow{n box-shadow: 10px 10px 10px rgba(255,235,59,0.74);n}n

drop-shadow明顯更柔和一些，並且圖片的上面和左邊也是有陰影的哦。

再來看下drop-shadow在png圖片的表現吧，左邊為原圖：

.drop-shadow-png{n -webkit-filter: drop-shadow(10px 10px 10px rgba(255,235,59,0.74));n}n

因為png圖片背景是透明的，所以drop-shadow直接作用於圖片的內容，圖中的小女孩是不是更萌了呢。

2.2 sepia 烏賊墨，深褐色，深棕色

想要個老照片效果？

.sepia-50{n -webkit-filter: sepia(50%);n}n.sepia-100{n -webkit-filter: sepia(100%)n} n//safari瀏覽器不支持n

參數可以是小數也可以是百分比，為0的時候是左邊原圖的效果，1或100%是最右的圖

2.3 blur 模糊

背景圖片太清晰喧賓奪主了，可以設置模糊的效果啊

.blur{n -webkit-filter: blur(3px);n}n

blur用來給圖像設置高斯模糊。參數值設定高斯函數的標準差，或者是屏幕上以多少像素融在一起，這個值設置為百分比除外的css長度值，默認是0效果為左邊的原圖，值越大越模糊，上面的圖片設置成100px時就什麼都沒有了。

2.4 opacity 透明度

opacity會調整圖片的透明度，這個和非filter中的opacity效果是一樣噠，但是並不是一個屬性哦，因為他們是可以疊加使用的

.opacity-20{n opacity: 0.2;n}n.filter-opacity-20{n filter:opacity(0.2)n}n.opacity-both{n opacity: 0.2;n filter:opacity(0.2)n}n

他們接受的參數也是有一些差別的，opacity只能接受小數，filter:opactiy()既可以接受小數也可以接受百分比，值越小越透明。

2.5 hue-rotate 色相旋轉

hue-rotate通過改變圖片的色相來改變圖片

.hue-rotate-90{n -webkit-filter: hue-rotate(90deg);n}n.hue-rotate-270{n -webkit-filter: hue-rotate(270deg);n}n

hue-rotate 參數是一個角度值，他會接受這個值並把圖片中的顏色的色相做對應的旋轉

2.6 invert 反轉

invert會把圖片上的所有顏色進行反轉，如果是希望做個相機底片效果，真的是太合適了

.invert-20{n filter: invert(20%);n}n.invert-100{n filter: invert(100%)n}n

和hue-rotate相比，直接反轉就用不著接受顏色變化的角度了，但是你可以設置0~100%來控制反轉的程度

2.7 saturate 飽和度

色彩三要素色相，明度，飽和度。飽和度也即顏色的純度，彩度。無彩色的色飽和度為0，也就是上面的grayscale灰度值為1的時候,飽和度越高，顏色中的灰度越低

飽和度100%時為原圖，接受大於100%的值。

2.8 brightness 亮度

說完了色相和飽和度再來看看brightness,brightness給圖片應用一種線性乘法來調整整個圖片的亮度，效果和手機電腦上的的亮度調節是一樣的

.brightness-4{n filter:brightness(40%)n}n.brightness-8{n filter:brightness(80%)n}n

brightness的參數可以用百分比來表示也可以用小數來表示，當參數值為0的時候整個圖片都是黑色的了,超過100%的時候比原圖更亮一些

2.9 contrast 對比度

contrast用來調整圖像的對比度

.contrast-50 {n filter: contrast(50%)n}n.contrast-200{n filter:contrast(200%)n}n

contrast()的參數接受百分比形式的數值也接受小數形式的，值為0 的時候是整個圖片都是灰黑色的，為1時是原圖，值越大對比度越大，默認值為1。

2.10 grayscale 灰度模式

有格調的灰度模式開啟

.gray-scale-50{n filter:grayscale(50%)n}n.gray-scale-100{n filter:grayscale(100%)n}n

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 亮度模式

3.1 mix-blend-mode

mix-blend-mode主要作用是把目標元素和其下方的背景元素混合。

圖片來自於caniuse.com

快速開始：

這是兩張原圖

html

<div class="mix-blend-mode">n <img src="./images/girl.jpg" alt="girl.jpg" >n <img src="./images/minion.jpg" alt="minion.jpg" >n </div>n

css

/*讓兩張圖片重疊在一起*/n.mix-blend-mode{n position:relativen}n.mix-blend-mode img{n position:absoluten}n

然後就可以給小黃人圖片添加mix-blend-mode啦，因為小女孩圖片排在小黃人下面，所以如果給小女孩圖片添加效果而不給小黃人添加mix-blend-mode的話是看不到任何效果的。

.mix-normal{n mix-blend-mode: normal;n}n.mix-color{n mix-blend-mode: color;n}n.mix-color-burn{n mix-blend-mode:color-burn;n}n.mix-color-dodge{n mix-blend-mode: color-dodge;n}n.mix-darken{n mix-blend-mode: darken;n}n.mix-difference{n mix-blend-mode: difference;n}n

.mix-exclusion{n mix-blend-mode: exclusion;n}n.mix-hard-light{n mix-blend-mode: hard-light;n}n.mix-hue{n mix-blend-mode: hue;n}n.mix-inherit{n mix-blend-mode: inherit;n}n.mix-initial{n mix-blend-mode: initial;n}n.mix-lighten{n mix-blend-mode: lighten;n}n

.mix-luminosity{n mix-blend-mode: luminosity;n}n.mix-overlay{n mix-blend-mode: overlay;n}n.mix-saturation{n mix-blend-mode: saturation;n}n.mix-screen{n mix-blend-mode: screen;n}n.mix-soft-light{n mix-blend-mode: soft-light;n}n.mix-unset{n mix-blend-mode: unset;n}n

添加了mix-blend-mode屬性的圖片除了可以對其下面的圖片疊加，還可以對其背景色疊加，左一為原圖，依次給右邊4張圖片添加下面css中的樣式，並且給他們的父元素設置藍色背景，然後，各種藝術形態的小黃人出現了！

.mix-background-lighten{n mix-blend-mode: lighten;n}n.mix-background-screen{n mix-blend-mode: screen;n}n.mix-background-difference{n mix-blend-mode: difference;n}n.mix-background-luminosity{n mix-blend-mode: luminosity;n}n

3.2 background-blend-mode

兼容性如下：

圖片來自caniuse.com

background-blend-mode顧名思義是作用於background-image，background-color的。並且是寫在一個background屬性後面的圖片，顏色哦。

.background-blend-mode-self{n background: url(./images/g.jpg) #673AB7 no-repeat;n background-blend-mode: unset;n}n.background-blend-mode-color{n background: url(./images/g.jpg) #673AB7 no-repeat;n background-blend-mode: screen;n}n.background-blend-mode-luminosity{n background: url(./images/g.jpg) #673AB7 no-repeat;n background-blend-mode: luminosity;n}n.background-blend-mode-exclusion{n background: url(./images/g.jpg) #673AB7 no-repeat;n background-blend-mode: exclusion;n}n.background-blend-mode-overlay{n background: url(./images/g.jpg) #673AB7 no-repeat;n background-blend-mode: overlay;n}n.background-blend-mode-soft-light{n background: url(./images/g.jpg) #673AB7 no-repeat;n background-blend-mode: soft-light;n}n

篇幅有限，其他的background-blend-mode效果就不貼代碼啦。

四參考文獻

https://developer.mozilla.org/en-US/docs/Web/CSS/filter

Blend modes - Wikipedia

揣摩了半個月寫的文章，謝謝大家點贊支持，真是莫大的鼓勵，其實這些功能綜合運用會有很神奇的效果，後續會寫文章介紹噠，歡迎關注專欄卓怡的前端筆記