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

CSSのbackground-blend-modeで背景レイヤーごとのブレンドモードを設定する方法

CSSのbackground-blend-modeプロパティとは？

background-blend-modeプロパティを使用すると、CSSで各背景レイヤーのブレンドモード（合成モード）を個別に設定できます。複数の背景画像や背景色を重ねた際に、レイヤー同士がどのように混ざって表示されるかをコントロールできるため、グラフィックソフトのような表現をHTMLとCSSだけで実現できます。

例えば、ブレンドモードをdarken（比較（暗））に設定すると、重なり合う部分では暗い方の色が優先されて表示されます。以下のコードを実行して、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：2つの画像URLをカンマで区切って指定し、複数の背景レイヤーを作成しています。
  • background-repeat：「no-repeat, repeat」と指定することで、1つ目の画像は繰り返しなし、2つ目の画像は繰り返しありで表示されます。
  • background-blend-mode：「darken」を指定することで、すべての背景レイヤーがdarkenモードでブレンドされます。

主なブレンドモードの種類

background-blend-modeには、以下のような値を指定できます。

  • normal：通常表示（ブレンドなし）
  • multiply：乗算。全体的に暗くなる
  • screen：スクリーン。全体的に明るくなる
  • overlay：オーバーレイ。コントラストが強調される
  • darken：比較（暗）。暗い方の色が優先される
  • lighten：比較（明）。明るい方の色が優先される
  • difference / exclusion：色の差分による特殊な合成
  • hue / saturation / color / luminosity：色相・彩度・色・輝度を基準とした合成

また、カンマ区切りで複数の値を指定すれば、レイヤーごとに異なるブレンドモードを適用することも可能です。背景画像の組み合わせ次第で、テクスチャ加工や透かし表現など、さまざまなデザインを手軽に実現できるので、ぜひ活用してみてください。

  1. CSSのlinear-gradient()関数で背景に線形グラデーションを設定する方法

    CSSでは、linear-gradient()関数を使うことで、背景画像として線形グラデーションを簡単に設定できます。この関数はbackgroundプロパティやbackground-imageプロパティの値として指定し、複数の色をカンマで区切って渡すことで、それらが滑らかにつながったグラデーションが生成されます。 linear-gradient()関数の基本構文 background: linear-gradient(色1, 色2, 色3, ...); 色は2つ以上指定でき、上から下へ順番に表示されます。グラデーションの方向（角度）を指定することも可能です。例えばlinear-gradient

  2. CSSで背景に放射状グラデーション（radial-gradient）を設定する方法

    CSSのradial-gradient()関数を使用すると、中心点から外側に向かって色が変化する放射状グラデーションを、背景画像として簡単に設定できます。複数の色を指定するだけで、滑らかなグラデーションが自動的に生成されるため、ボタンやバナー、セクション背景などのデザインに幅広く活用できます。radial-gradient()の基本構文background: radial-gradient(色1, 色2, 色3, ...);色はカンマ区切りで複数指定でき、左側に記述した色が中心になり、右側の色が外周へと変化していきます。実装例次のコードでは、緑（green）・オレンジ（orange）・栗色（m