CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのbackground-blend-modeプロパティとは？背景画像のブレンドモード設定方法を解説

CSSの background-blend-mode プロパティを使うと、要素に指定した複数の背景レイヤー（背景画像や背景色）同士をブレンド（合成）するモードを個別に設定できます。Photoshopなどの画像編集ソフトでおなじみの「乗算」や「スクリーン」といった合成モードを、CSSだけで手軽に実現できるのが特徴です。

このプロパティは、カンマ区切りで複数の値を指定することで、各背景レイヤーごとに異なるブレンドモードを適用できます。例えば「darken（比較（暗））」を指定すると、重なった背景レイヤーのうち暗い方の色が優先されて表示されます。

background-blend-modeの主な値

  • normal：通常。ブレンドを行いません
  • multiply：乗算。重なった部分が暗くなります
  • screen：スクリーン。重なった部分が明るくなります
  • overlay：オーバーレイ。明暗のコントラストが強調されます
  • darken：比較（暗）。暗い方の色が表示されます
  • lighten：比較（明）。明るい方の色が表示されます
  • color-dodge / color-burn / difference / exclusion / hue / saturation / color / luminosity：その他の特殊な合成効果

実装サンプルコード

以下のコードでは、2枚の背景画像を指定し、background-blend-mode を「darken」に設定してブレンド効果を確認できます。

<!DOCTYPE html>
<html>
   <head>
      <style>
         #myDIV {
            width: 250px;
            height: 170px;
            background-repeat: no-repeat, repeat;
            background-image: url("https://www.tutorialspoint.com/assets/videotutorials/courses/3d_animation_online_training/380_course_211_image.jpg"),
             url( https://www.tutorialspoint.com/latest/dc.js.png);
            background-blend-mode: darken;
         }
      </style>
   </head>
   <body>
      <h1>Set Blend Mode</h1>
      <div id = "myDIV"></div>
   </body>
</html>

コードのポイント

  • background-image：カンマで区切って複数の背景画像を指定しています
  • background-repeat：1つ目の画像は繰り返しなし（no-repeat）、2つ目は繰り返しあり（repeat）に設定
  • background-blend-mode: darken：2つの背景レイヤーを「比較（暗）」モードでブレンドします

このように、background-blend-mode を活用すれば、画像編集ソフトを使わずともCSSだけでリッチな視覚効果を持つデザインを実装できます。ブラウザの対応状況も良好で、主要なモダンブラウザで問題なく動作します。

  1. CSSのwhite-spaceプロパティとは？要素内の空白・改行の扱い方を徹底解説

    CSSのwhite-spaceプロパティを使うと、HTML要素内の半角スペース、タブ、改行などの空白文字をどのように表示するかを細かく制御できます。デフォルトでは連続する空白は1つにまとめられますが、このプロパティを指定することで、ソースコード上の空白や改行をそのまま反映させたり、逆に折り返しを禁止したりすることが可能です。 white-spaceプロパティの基本例 以下は、normalとpreという2つの値を使って、空白の扱いの違いを比較するサンプルコードです。 <!DOCTYPE html> <html> <head> <style>

  2. CSSのwriting-modeプロパティ徹底解説！テキストを縦書き・横書きにする方法

    writing-modeプロパティとは CSSのwriting-modeプロパティは、テキストの行を水平方向にレイアウトするか、垂直方向にレイアウトするかを指定するためのプロパティです。日本語の縦書きのように、上から下へ文字を読ませるレイアウトも簡単に実現できます。 基本構文 writing-mode: horizontal-tb | vertical-rl | vertical-lr; 指定できる主な値 horizontal-tb … 行が上から下へ流れる標準的な横書き表示（初期値） vertical-rl … 行が右から左へ流れる縦書き表示。日本語や中国語などの縦組みレイアウトに適し