CSS「mix-blend-mode」で画像の乗算加工を実装する
画像に文字を載せる際に文字を読みやすくするためや、画像の印象を変える際等に「乗算」加工を施す場合があります。以前は、画像を事前に加工していたり、透過処理で似たような効果を得ていたのですが、CSSの「mix-blend-mode」で乗算加工ができるようになっていたのでメモ。 HTML <div class="image_wrap"> <figure><img src="○○.jpg"></figure> <div class="blend-wrap"> <p>乗算の上に乗せた文字</p> </div> </div> CSS .image_wrap { position: relative; display: inline-block; } .blend-wrap p { color: #fff; position: relative; z-index: 1; } .blend-wrap { padding: 2rem; position: absolute; right: 0; bottom: 0; } .blend-wrap::before { content: ''; background: #093177; mix-blend-mode: multiply; position: absolute; top: 0; right: 0; bottom: 0; left: 0; } 乗算の適応範囲が子要素まで及ぶので、使用する際には疑似要素（::before等）を使うなどの工夫が必要です。 SAMPLE 乗算の上に乗せた文字 .image_wrap{ position: relative; display: inline-block; } .blend-wrap p { margin: 0 !important; color: #fff; position: relative; z-index: 1; } .blend-wrap { margin: 0 !important; padding: 2rem; position: absolute; right: 0; bottom: 0; } .blend-wrap::before { content: ''; background: #093177; mix-blend-mode: multiply; position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .blogpage .wrap .post_main .wp-block-image { display: inline-block; } .post_sample01, .post_sample02 { position: relative; } .post_sample01::after, .post_sample02::after { content: ''; background: var(--darkcolor); position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: 0.5; } .post_sample02::after { mix-blend-mode: multiply; } 下記は画像加工の方法による実際の見え方の比較です。色は同じものを使用していますが、透過は合成の仕方が異なるため、若干見え方が異なります。 画像加工で乗算をしたもの（50％透過） CSSで透過したもの（50％透過） CSSで乗算したもの（50％透過） なお、プロパティーの値には乗算の他にも画像加工で付与できる効果が一通り設定できるようです。 効果値通常normal乗算multiplyスクリーンscreenオーバーレイoverlay覆い焼きcolor-dodge焼き込みcolor-burn比較（暗）darken比較（明）lightenハードライトhard-lightソフトライトsoft-light差の絶対値difference除外exclusion色相hue彩度saturationカラーcolor輝度luminosity 乗算などのブレンドモードはCSSの「mix-blend-mode」で解決 Photoshopの乗算とは一体何が起きているのか？
