photoshop混和模式可以用css呈現，關於mix-blend-mode
閱讀時間約 1 分鐘
用photoshop製圖時常會用到混和模式的效果，
但切成網頁圖片時，卻呈現不出來，例如光暈旁邊都會帶黑邊，
最近看到一個css3的混色模式可以達成這樣的效果，
於是記錄一下。
以後切圖的黑色部分可以直接變透明喔！
.img{
mix-blend-mode: screen;
}
0會員
1內容數
留言0
查看全部
你可能也想看
Google News 追蹤
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
美國總統大選只剩下三天， 我們觀察一整週民調與金融市場的變化（包含賭局）， 到本週五下午3:00前為止， 誰是美國總統幾乎大概可以猜到60-70%的機率， 本篇文章就是以大選結局為主軸來討論近期甚至到未來四年美股可能的改變
Faker昨天真的太扯了，中國主播王多多點評的話更是精妙，分享給各位
王多多的點評
「Faker是我們的處境，他是LPL永遠繞不開的一個人和話題，所以我們特別渴望在決賽跟他相遇，去直面我們的處境。
我們曾經稱他為最高的山，最長的河，以為山海就是盡頭，可是Faker用他28歲的年齡...
１. 細條紋
STEP1.
開新檔案，設定尺寸為3X3像素、背景內容透明之透明背景新檔。放大檢視至最大狀態，使用鉛筆工具，選擇1像素之筆刷樣式、設定不透明：100%，前景色為黑色。
STEP2.
使用鉛筆直接繪製要成為圖樣的內容，繪製後並執行『編輯 > 定義成圖樣』，定義細長斜條圖樣。
S
由不同場景的圖，藉由去背景處理與局部變形，重新處理組合成一完整的合成場景。
Step1.
開啟範例練習檔，分別為三個不同場景的影像，要合成為同一個場景圖。
Step2.
首先在第一張場景圖之中，使用魔術橡皮擦工具，設定容許度：30、勾選「連續的」，在天空背景處按下滑鼠，清除天空背景。
Step
Step1.
開啟範例練習檔，為寬高50像素之圖檔，執行『影像 > 影像尺寸』更改寬高為5000像素（100倍），並選擇影像重新取樣為『最接近像素（保留硬邊）』，如此影像放大後即有馬賽克色塊影像效果。
Step2.
開啟要成為圖樣的檔案（尺寸200像素正方），執行『編輯 > 定義圖樣』，回到主要
Step1.
開啟範例練習檔，透視參考線圖層為透視角度參考依據，目的是要將人物依據準確的透視角度來複製合成。
複製人物圖層成人物拷貝，點取人物拷貝圖層，按下『Ctrl』『T』任意變形，移動變形中心至透視參考線交叉點上，滑鼠由左下角編輯點按住『Alt』固定中心等比例縮小，按下Enter確認變形。
Step1.
開啟範例練習檔，新增圖層1，使用筆刷工具，設定筆刷大小約100、不透明約30％，繪製白色筆畫作為煙霧製作的來源，筆畫塗繪約有煙霧方向與濃淡。
Step2.
確定點取圖層1，執行 「濾鏡」→「液化」，進入影像液化變形編輯視窗。
在檢視選項中，勾取「顯示影像」、「顯示網紋」、「顯示背景
在影像合成上使用遮色片編輯，除了他的隨時可編輯性之外，建立的遮色片還能夠使用濾鏡來更改遮色片的邊緣效果，其中遮色片加上高斯模糊，讓遮色片邊緣模糊而成為可即時控制的邊緣羽化效果，是影像合成中很重要的技法。
Step1.
開啟範例練習檔，檔案中的圖層1影像內容，目的可以與背景影像搭配，而圖層1上的影像
藉由不同影像素材間的影像去背，重新組合處理與編輯，完成由各自獨立影像合成的效果。
Step1.
開啟範例練習檔，分別為三個不同場景的影像，要合成為同一個場景圖。
Step2.
使用筆形工具建立影像輪廓路徑，按下『載入路徑作為選取範圍』按鈕，將路徑轉換選取範圍，執行「編輯」→「拷貝」。
Step
在色版上可以使用調整色彩指令，來改變分色色版上的黑灰白分佈，如「曲線」、「亮度對比」、「臨界值」、「色調分離」、「負片效果」等調整分色色版的黑灰白分佈，也可以處理出特別的影像顏色效果。
Step1.
開啟範例練習檔，執行「視窗」→「色版」開啟色版浮動視窗。由於色彩模式是RGB，所以在色版浮動視窗上會
A.使用選取工具建立選取區時的選取範圍運算
您可以使用選取工具，從現有的像素選取範圍增加或減去，或僅選取與其他選取範圍相交的區域。
1.增加至選取範圍或選取其他區域
在已經先建立了選取範圍的狀況之下，使用任何選取工具，在選項列中選取「增加至選取範圍」選項，然後以拖移方式繼續加入選取範圍。當您新增至
利用形狀繪圖工具，並搭配變形處理，完成具立體感的影像繪圖。
STEP1.
開啟新檔選擇網頁，寬高均為500像素、解析度72像素/英吋，並取消工作畫板選項。
執行【檢視>尺標】在尺標刻度上按下滑鼠右鍵，選擇執行【像素】，即是將介面設定值單位固定為像素單位。
STEP2.
在圖層上新增圖層1，使用
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
美國總統大選只剩下三天， 我們觀察一整週民調與金融市場的變化（包含賭局）， 到本週五下午3:00前為止， 誰是美國總統幾乎大概可以猜到60-70%的機率， 本篇文章就是以大選結局為主軸來討論近期甚至到未來四年美股可能的改變
Faker昨天真的太扯了，中國主播王多多點評的話更是精妙，分享給各位
王多多的點評
「Faker是我們的處境，他是LPL永遠繞不開的一個人和話題，所以我們特別渴望在決賽跟他相遇，去直面我們的處境。
我們曾經稱他為最高的山，最長的河，以為山海就是盡頭，可是Faker用他28歲的年齡...
１. 細條紋
STEP1.
開新檔案，設定尺寸為3X3像素、背景內容透明之透明背景新檔。放大檢視至最大狀態，使用鉛筆工具，選擇1像素之筆刷樣式、設定不透明：100%，前景色為黑色。
STEP2.
使用鉛筆直接繪製要成為圖樣的內容，繪製後並執行『編輯 > 定義成圖樣』，定義細長斜條圖樣。
S
由不同場景的圖，藉由去背景處理與局部變形，重新處理組合成一完整的合成場景。
Step1.
開啟範例練習檔，分別為三個不同場景的影像，要合成為同一個場景圖。
Step2.
首先在第一張場景圖之中，使用魔術橡皮擦工具，設定容許度：30、勾選「連續的」，在天空背景處按下滑鼠，清除天空背景。
Step
Step1.
開啟範例練習檔，為寬高50像素之圖檔，執行『影像 > 影像尺寸』更改寬高為5000像素（100倍），並選擇影像重新取樣為『最接近像素（保留硬邊）』，如此影像放大後即有馬賽克色塊影像效果。
Step2.
開啟要成為圖樣的檔案（尺寸200像素正方），執行『編輯 > 定義圖樣』，回到主要
Step1.
開啟範例練習檔，透視參考線圖層為透視角度參考依據，目的是要將人物依據準確的透視角度來複製合成。
複製人物圖層成人物拷貝，點取人物拷貝圖層，按下『Ctrl』『T』任意變形，移動變形中心至透視參考線交叉點上，滑鼠由左下角編輯點按住『Alt』固定中心等比例縮小，按下Enter確認變形。
Step1.
開啟範例練習檔，新增圖層1，使用筆刷工具，設定筆刷大小約100、不透明約30％，繪製白色筆畫作為煙霧製作的來源，筆畫塗繪約有煙霧方向與濃淡。
Step2.
確定點取圖層1，執行 「濾鏡」→「液化」，進入影像液化變形編輯視窗。
在檢視選項中，勾取「顯示影像」、「顯示網紋」、「顯示背景
在影像合成上使用遮色片編輯，除了他的隨時可編輯性之外，建立的遮色片還能夠使用濾鏡來更改遮色片的邊緣效果，其中遮色片加上高斯模糊，讓遮色片邊緣模糊而成為可即時控制的邊緣羽化效果，是影像合成中很重要的技法。
Step1.
開啟範例練習檔，檔案中的圖層1影像內容，目的可以與背景影像搭配，而圖層1上的影像
藉由不同影像素材間的影像去背，重新組合處理與編輯，完成由各自獨立影像合成的效果。
Step1.
開啟範例練習檔，分別為三個不同場景的影像，要合成為同一個場景圖。
Step2.
使用筆形工具建立影像輪廓路徑，按下『載入路徑作為選取範圍』按鈕，將路徑轉換選取範圍，執行「編輯」→「拷貝」。
Step
在色版上可以使用調整色彩指令，來改變分色色版上的黑灰白分佈，如「曲線」、「亮度對比」、「臨界值」、「色調分離」、「負片效果」等調整分色色版的黑灰白分佈，也可以處理出特別的影像顏色效果。
Step1.
開啟範例練習檔，執行「視窗」→「色版」開啟色版浮動視窗。由於色彩模式是RGB，所以在色版浮動視窗上會
A.使用選取工具建立選取區時的選取範圍運算
您可以使用選取工具，從現有的像素選取範圍增加或減去，或僅選取與其他選取範圍相交的區域。
1.增加至選取範圍或選取其他區域
在已經先建立了選取範圍的狀況之下，使用任何選取工具，在選項列中選取「增加至選取範圍」選項，然後以拖移方式繼續加入選取範圍。當您新增至
利用形狀繪圖工具，並搭配變形處理，完成具立體感的影像繪圖。
STEP1.
開啟新檔選擇網頁，寬高均為500像素、解析度72像素/英吋，並取消工作畫板選項。
執行【檢視>尺標】在尺標刻度上按下滑鼠右鍵，選擇執行【像素】，即是將介面設定值單位固定為像素單位。
STEP2.
在圖層上新增圖層1，使用