HTML要素のブレンド合成モードを設定する - CSS

CSSでHTML要素のブレンド(合成)モードを設定するコードを紹介します。

概要

CSSでHTML要素のブレンドモードを設定するには mix-blend-mode プロパティを利用します。

書式

mix-blend-mode:(合成モード)

合成モードには次の値が利用できます。

合成モード
モード名	効果
normal	合成しない
multiply	乗算で合成
screen	スクリーンモードで合成
overlay	オーバーレイモードで合成
darken	比較（暗）で合成
lighten	比較（明）で合成
color-dodge	覆い焼きモードで合成
color-burn	焼き込みモードで合成
soft-light	ソフトライトモードで合成
difference	差の絶対値モードで合成
exclusion	除外モードで合成
hue	色相モードで合成
color	カラーモードで合成
luminosity	輝度モードで合成

実装例1 : オーバーレイ

下記のCSSファイル、HTMLファイルを準備します。

コード

BlendTextOverlay.css

body {
  background: url('./back.jpg');
  background-size: 100% auto;
}

.BlendTextElement {
  font-size: 4rem;
  color: #FFFFFF;
  mix-blend-mode: overlay;
}

BlendTextOverlay.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
  <link rel="stylesheet" href="BlendTextOverlay.css" />
</head>
<body>
  <div style="height:5rem;"></div>
  <p class="BlendTextElement">テストですABCDEFG</p>
</body>
</html>

解説

mix-blend-mode: overlay; の指定により要素をオーバーレイモードで合成します。

表示結果

上記のHTMLファイルをWebブラウザで表示します。文字がオーバーレイで合成されていることが確認できます。

実装例2 : 乗算

コード

下記のCSSファイル、HTMLファイルを準備します。

BlendTextMultiply.css

body {
  background: url('./back2.jpg');
  background-size: 100% auto;
}

.BlendTextElement {
  font-size: 4rem;
  color: #A0A0A0;
  mix-blend-mode: multiply;
}

BlendTextMultiply.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
  <link rel="stylesheet" href="BlendTextMultiply.css" />
</head>
<body>
  <div style="height:5rem;"></div>
  <p class="BlendTextElement">テストですABCDEFG</p>
</body>
</html>

解説

mix-blend-mode: multiply; の指定により要素を乗算で合成します。

表示結果

上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。文字が乗算モードで合成されていることが確認できます。

実装例3 : モードごとの表示の違い

コード

下記のCSSファイル、HTMLファイルを準備します。

BlendModeDemo.html

.BackFrame {
  width:1600px;
  background: url('./back2.jpg');
}

.FlexFrame {
  display: flex;
  justify-content: space-around;
}

.imgBlendNormal {
  width: 180px;
  mix-blend-mode: normal;
}

.imgBlendMultiply {
  width: 180px;
  mix-blend-mode: multiply;
}

.imgBlendScreen {
  width: 180px;
  mix-blend-mode: screen;
}

.imgBlendOverlay {
  width: 180px;
  mix-blend-mode: overlay;
}

.imgBlendDarken {
  width: 180px;
  mix-blend-mode: darken;
}

.imgBlendLighten {
  width: 180px;
  mix-blend-mode: lighten;
}

.imgBlendColorDodge {
  width: 180px;
  mix-blend-mode: color-dodge;
}

.imgBlendColorBurn {
  width: 180px;
  mix-blend-mode: color-burn;
}

.imgBlendSoftLight {
  width: 180px;
  mix-blend-mode: soft-light;
}

.imgBlendDifference {
  width: 180px;
  mix-blend-mode: difference;
}

.imgBlendExclusion {
  width: 180px;
  mix-blend-mode: exclusion;
}

.imgBlendHue {
  width: 180px;
  mix-blend-mode: hue;
}

.imgBlendColor {
  width: 160px;
  mix-blend-mode: color;
}

.imgBlendLuminosity {
  width: 180px;
  mix-blend-mode: luminosity;
}

BlendModeDemo.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
  <link rel="stylesheet" href="BlendModeDemo.css" />
</head>
<body>
  <div class="BackFrame">
    <div class="FlexFrame">
      <div class="FlexCell">
        <p>normal</p>
        <img class="imgBlendNormal" src="ipentec.png" />
      </div>
      <div>
        <p>multiply</p>
        <img class="imgBlendMultiply" src="ipentec.png" />
      </div>
      <div>
        <p>screen</p>
        <img class="imgBlendScreen" src="ipentec.png" />
      </div>
      <div>
        <p>overlay</p>
        <img class="imgBlendOverlay" src="ipentec.png" />
      </div>
      <div>
        <p>darken</p>
        <img class="imgBlendDarken" src="ipentec.png" />
      </div>
      <div>
        <p>lighten</p>
        <img class="imgBlendLighten" src="ipentec.png" />
      </div>
      <div class="FlexCell">
        <p>color-doge</p>
        <img class="imgBlendColorDodge" src="ipentec.png" />
      </div>
    </div>

    <div class="FlexFrame">
      <div>
        <p>color-burn</p>
        <img class="imgBlendColorBurn" src="ipentec.png" />
      </div>
      <div>
        <p>soft-light</p>
        <img class="imgBlendSoftLight" src="ipentec.png" />
      </div>
      <div>
        <p>difference</p>
        <img class="imgBlendDifference" src="ipentec.png" />
      </div>
      <div>
        <p>exclusion</p>
        <img class="imgBlendExclusion" src="ipentec.png" />
      </div>
      <div>
        <p>hue</p>
        <img class="imgBlendHue" src="ipentec.png" />
      </div>
      <div class="FlexCell">
        <p>color</p>
        <img class="imgBlendColor" src="ipentec.png" />
      </div>
      <div>
        <p>luminosity</p>
        <img class="imgBlendColorBurn" src="ipentec.png" />
      </div>
    </div>
  </div>
</body>
</html>

解説

mix-blend-mode の設定が異なるクラスを用意し、ブレンドモードの違いによる画像合成を表示します。

表示結果

上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。
上の段は左から右に向かって、normal, multiply, screen, overlay, darken, lighten, color-doge のモードで画像を表示しています。
下の段は左から右に向かって、color-burn, soft-light, difference, exclusion, hue, color, luminosity のモードで画像を表示しています。

著者

とりっち

iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。

目次

HTML要素のブレンド合成モードを設定する - CSS

概要

書式

実装例1 : オーバーレイ

コード

解説

表示結果

実装例2 : 乗算

コード

解説

表示結果

実装例3 : モードごとの表示の違い

コード

解説

表示結果

関連するページ