去背效果:mix-blend-mode

圖層混和模式 mix-blend-mode ,可以用來達成去背效果

他色底 + 黑内容:multiply

multiply 色彩增値

圖片色與背景色相乘,替換圖片的顏色

替換規則:

  • 他色*黑色=黑色
  • 他色*白色=他色

範例

<div>
 <img src="https://goo.gl/lZvsBv" />
</div>
div
 background-color: #ff96a7
 width: 500px
 padding: 20px
img
 mix-blend-mode: multiply

Display

▼原圖片

 

▼色彩增値後

 

所以圖片本來白色的地方變成他色(粉紅色),黑色則維持黑色

白色底 + 他色内容:screen

screen濾色

圖片色與背景色的補値相乘
替換規則

  • 他色*黑色=他色
  • 他色*白色=白色

※就是 multiply 的相反

範例

<div>
 <img src="https://goo.gl/lZvsBv" />
</div>
div
 background-color: #ff96a7
 width: 500px
 padding: 20px
img
 mix-blend-mode: screen

Display

▼原圖片

 

▼濾色後

圖片本來白色的地方維持白色,黑色則變成他色(粉紅色)

Leave a Reply

Your email address will not be published. Required fields are marked *