Widely available YES。主要ブラウザで広く対応済み。本番利用を推奨。
エフェクト Widely available

background-blend-mode

Photoshopのレイヤーブレンドモードと同様の効果をCSSで実現できます。multiply で暗く合成、screen で明るく合成、overlay でコントラストを強調するなど、画像編集ソフトなしでリッチなビジュアル表現が可能です。背景色と背景画像の組み合わせでカラーフィルターのような効果も作れます。

ブレンドモードビジュアル効果

概要

Photoshopのレイヤーブレンドモードと同様の効果をCSSで実現できます。multiply で暗く合成、screen で明るく合成、overlay でコントラストを強調するなど、画像編集ソフトなしでリッチなビジュアル表現が可能です。背景色と背景画像の組み合わせでカラーフィルターのような効果も作れます。

対応ブラウザ

デスクトップ

Chrome 35+
Edge 79+
Safari 8+
Firefox 30+

モバイル

Chrome Android 59+
Safari iOS 8+
Firefox Android 54+

基本構文

CSS 
.tinted-image {
  background-image: url('photo.jpg');
  background-color: #3498db;
  background-blend-mode: multiply;
}

実務での使いどころ

  • 背景画像へのカラーフィルター適用

    背景色と画像をブレンドして、デュオトーンやモノクロ風のビジュアル効果をCSSだけで実現できます。

注意点

  • ブレンドモードの効果は背景色と画像の組み合わせにより大きく変わります。意図した見た目になるか、複数の画像で検証してください。

アクセシビリティ

  • ブレンドモードの適用後もテキストの可読性が損なわれていないか確認してください。コントラスト比のチェックは合成後の色で行う必要があります。

参考リンク