CSS中使圖片白色背景轉透明

10 月 24, 2020 | CSS, | 0 條留言

如果背景顏色為白色,有一種方法可以使用CSS混合模式,添加mix-blend-mode: multiply;CSS屬性:

img{
  mix-blend-mode: multiply;
}

Demo

CSS混合模式:

background-blend-mode – CSS: Cascading Style Sheets | MDN
mix-blend-mode – CSS: Cascading Style Sheets | MDN
isolation – CSS: Cascading Style Sheets | MDN

CSS透明的其他解決方案

Mix-blend-mode確實適用於某些瀏覽器,但有團隊發現它會導致chrome中的性能問題。

團隊的一位設計師想到了這個天才的技巧,您可以在其中創建一個幾乎是透明的圖層,但是當它放置在白色背景上時,其顏色將與周圍背景的顏色匹配。

找到這種“神奇”顏色的方式;通過計算除去的不透明度量,每個色軸應變暗多少。公式為255 - ( 255 - x ) / opacity

參考連結: Make white background of image transparent in css