photoshop混和模式可以用css呈現，關於mix-blend-mode
閱讀時間約 1 分鐘
用photoshop製圖時常會用到混和模式的效果，
但切成網頁圖片時，卻呈現不出來，例如光暈旁邊都會帶黑邊，
最近看到一個css3的混色模式可以達成這樣的效果，
於是記錄一下。
以後切圖的黑色部分可以直接變透明喔！
.img{
mix-blend-mode: screen;
}
0會員
1內容數
留言0
查看全部
你可能也想看
Google News 追蹤
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
１. 細條紋
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 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
１. 細條紋
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，使用