如何用CSS修出好看的照片

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

修圖利器之 CSS Filters

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

1. drop-shadow
2. sepia
3. blur
4. hue-rotate
5. invert
6. brightness
7. contrast
8. opacity
9. grayscale
10. saturate

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-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圖片的表現吧，左邊為原圖：

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

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

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

如果想要個老照片效果

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

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

blur 模糊

背景圖片太清晰有喧賓奪主之嫌了？可以設定模糊的效果啊

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

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

opacity 透明度

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

.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通過改變圖片的色相來改變圖片

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

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

invert 反轉

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

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

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

saturate 飽和度

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

.saturate-50{
    filter: saturate(50%);
}
.saturate-200{
    filter: saturate(200%);
}

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

brightness 亮度

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

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

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

contrast 對比度

contrast用來調整影像的對比度

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

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

grayscale 灰度模式

有格調的灰度模式開啟

.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中圖層模式效果，他們的對應關係是：

1. normal 正常模式
2. multiply 正片疊底模式
3. screen 濾色模式
4. overlay 疊加模式
5. darken 變暗模式
6. lighten 變亮模式
7. color-burn 顏色加深模式
8. hard-light 強光模式
9. soft-light 柔光模式
10. difference 差值模式
11. exclusion 排除模式
12. hue 色相模式
13. saturation 飽和度模式
14. color 顏色模式
15. luminosity 亮度模式

mix-blend-mode 式

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

圖片來自於caniuse.com

快速開始：

這是兩張原圖

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

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

然後就可以給小黃人圖片新增mix-blend-mode啦，因為小女孩圖片排在小黃人下面，所以如果在不給小黃人設定mix-blend-mode的情況下只給小女孩圖片新增效果的話是看不到任何效果的。

.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;
}

.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;
}

.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中的樣式，並且給他們的父元素設定藍色背景，然後，各種藝術形態的小黃人出現了！

.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屬性後面的圖片，顏色哦。

.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效果就不貼程式碼啦。

程式碼地址

• 如何用CSS修出好看的照片

參考文獻

• css filters
• Blend modes – Wikipedia

其實這些功能綜合運用會有很神奇的效果，後續會寫文章介紹噠。

原文釋出時間為：2017年12月15日

原文作者：如夢令

本文來源前端外刊如需轉載請聯絡原作者