如何用 CSS 修出好看的照片

發表於2017-12-01

我們通常會通過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的區別:

v2-e2c450f77713b9c7c1c73eb40f9691e7_r.781d25e06d8a.jpg

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

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

v2-266153bc53bf7429baebe8be36f4d423_hd.f194e4aec793.jpg

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

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

如果想要個老照片效果

螢幕快照 2017-11-29 下午1.13.48.0c959467c203.png

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

blur 模糊

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

v2-dafc4a4be39ae31b3223a63973ec6f34_hd.fbe802296e80.jpg

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

opacity 透明度

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

螢幕快照 2017-11-29 下午1.27.27.220f618aaace.png

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

hue-rotate 色相旋轉

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

v2-4d1e4663fbf46bd27564c973f8e9cbcd_hd.ba245c55cf3f.jpg

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

invert 反轉

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

v2-d6219357884fce39f32937429bfa1afc_hd.4ca9beee71dc.jpg

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

saturate 飽和度

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

v2-d88c77da6f27e27df0d156cf003cc336_hd.3449f5fb68ce.jpg

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

brightness 亮度

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

v2-5524287df61e0e3a6623c8a8f8dce235_hd.5396c98a4dc8.jpg

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

contrast 對比度

contrast用來調整影像的對比度

v2-da3d67aa442839703cfed8b7fb5f42c1_hd.ac3e478f02b0.jpg

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

grayscale 灰度模式

有格調的灰度模式開啟

v2-c3b21e2cd33fa95ae97736c335b4d740_hd.2fe003ab24fd.jpg

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主要作用是把目標元素和其下方的背景元素混合。

v2-7c58d37971842564da5586ea8edf7987_hd.c91be63bec81.jpg

圖片來自於caniuse.com

快速開始:

v2-a45ad501f1878358a3951c824e15f26b_hd.4a9c203820f2.jpg

這是兩張原圖

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

螢幕快照 2017-11-29 下午9.25.50.b7f836ecda3f.png

螢幕快照 2017-11-29 下午9.27.06.94df5a907a52.png

螢幕快照 2017-11-29 下午9.28.14.11dd19964172.png

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

v2-1cdc0f442578c2460587fa9704bf7add_hd.a3d8d26c12ed.jpg

background-blend-mode

相容性如下:

v2-2669bb82f3acc40c2fe632efa04147b9_hd.ee161cbd6d2c.jpg 圖片來自於caniuse.com

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

v2-4460efadceb8aef0be323cfd7ed43122_hd.6442a04ed152.jpg

篇幅有限,其他的background-blend-mode效果就不貼程式碼啦。

程式碼地址

參考文獻

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

相關文章