はじめに 本記事ではCSSのプロパティ、「mix-blend-mode」と「background-blend-mode」についてご紹介します。 「mix-blend-mode」と「background-blend-mode」はそれぞれ画像、背景画像や色を合成するときに使うプロパティですが、どういうときにどちらのプロパティを使えばいいのか、混乱することがあるので、今回の記事でその違いや使い方についてもご紹介します。 CSS blend modes CSSブレンドモードとはブラウザ上で画像にオーバーレイ効果をかける方法です。 もともとデザイナーはPhotoshopなど画像ソフトを使い画像にオーバーレイなどのエフェクトをかけていたのですが、CSS blend modeの導入によりブラウザ上でもこれが実現可能になりした。 CSS blend modesには background-blend-mod