2014-08-29 95 views
0

我想混合2漸變來實現像背景混合影響的Photoshop。 http://jsfiddle.net/fmgfsr4o/2/Photoshop喜歡與CSS混合色彩

我試過玩弄background-blend-mode: multiply;但我無法達到預期的效果。 基本上,上面的小提琴中的重疊區域需要混合。

這甚至可能與CSS?

P.S.我對混合模式不太確定,過去一直沒有使用它!

下面是所需的圖像影響 -


enter image description here

+0

在發佈這樣的問題之前,我會查看CSS中可能的混合模式類型,以及它們的廣泛支持。他們是相當新的 – 2014-08-29 08:06:28

+0

@AndyHolmes http://caniuse.com/#feat=css-backgroundblendmode – 2014-08-29 08:09:38

+0

@Kshitiz告訴我們圖像作爲效果出現在psd – 2014-08-29 08:10:46

回答

2

你在找什麼是mix-blend-mode:這裏是與該屬性設置爲multiply代碼:http://jsbin.com/nodide/2/edit

background-blend-mode僅混合背景圖像和任何背景顏色的顏色,而mix-blend-mode則負責混合覆蓋元素。

目前它的支持度略低於background-blend-mode:它適用於最新的Firefox & Safari,以及Chrome和Opera,如果您啓用了試驗性網絡平臺的話。