More than 3 years have passed since last update.

jpg画像で白背景を透過

Last updated at 2020-11-21Posted at 2020-11-21

最近、twitter界隈で有名な、小林さん（@pulpxstyle）

先日投稿したツイートがかなりバズってました。

これを知ったとき、控えめに言って神かと思いました。

「Photoshopで加工した写真を背景透過で使いたいけどpngじゃないとできない！」
「でも、pngだと容量が重くて表示スピードが遅くなる、、、」

この課題を見事に解決してくれましたね。

※白いもの写真には注意です。一緒に透過する可能性があります。
色の濃い写真ならOKです。

一応、参考のソースコードがこちら。

<style>
  .photo_wrap{
    background-image: url("../sky.jpg");
    mix-blend-mode: multiply;
   }
</style>

  <div class="photo_wrap">
    <img src="picture.jpg" alt="白背景の写真">
  </div>