2019年6月21日 星期五

CSS 的圖層混合效果- mix-blend-mode

有用過 photoshop 的應該都知道有一個很好用的圖層混和效果,現在在 CSS 也可以直接使用這樣的效果了,我們要用的屬性就是 mix-blend-mode,可以設定的值則有以下這些:

mix-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|color-burn|difference|exclusion|hue|saturation|color|luminosity;

大致上的一些圖層混合模式跟 photoshop 差不多,來看一下效果:

multiply:

See the Pen
mix-blend-mode: multiply
by deathhell (@deathhell)
on CodePen.




screen:

See the Pen
mix-blend-mode: sreen
by deathhell (@deathhell)
on CodePen.



difference:

See the Pen
mix-blend-mode: difference
by deathhell (@deathhell)
on CodePen.



有興趣的朋友可以玩玩看。
反應:

0 意見:

Related Posts Plugin for WordPress, Blogger...