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

CSSのmix-blend-modeプロパティとは？使い方とブレンドモード一覧を解説

mix-blend-modeプロパティとは

CSSのmix-blend-modeプロパティは、要素の内容が直近の親要素の背景とどのようにブレンド（混合）されるかを指定するためのプロパティです。画像やテキストを背景色に自然に馴染ませたり、クリエイティブな視覚効果を生み出したりする際に活用できます。

指定できる値の一覧

mix-blend-modeプロパティには、以下の値を指定できます。

mix-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|color-burn|difference|exclusion|hue|saturation|color|luminosity;
  • normal：通常表示（ブレンドなし）
  • multiply：乗算。全体的に暗くなるブレンド
  • screen：スクリーン。全体的に明るくなるブレンド
  • overlay：オーバーレイ。背景の明暗に応じてコントラストが強調される
  • darken：比較（暗）。暗い方の色が採用される
  • lighten：比較（明）。明るい方の色が採用される
  • color-dodge：覆い焼き。背景色が明るくなる
  • color-burn：焼き込み。背景色が暗くなる
  • difference：差の絶対値。色の差分が反転して表示される
  • exclusion：排除。differenceよりも弱い反転効果
  • hue：色相。前景の色相＋背景の彩度・輝度を組み合わせる
  • saturation：彩度。前景の彩度＋背景の色相・輝度を組み合わせる
  • color：カラー。前景の色相・彩度＋背景の輝度を組み合わせる
  • luminosity：輝度。前景の輝度＋背景の色相・彩度を組み合わせる

サンプルコード①

まずは、normal・darken・lighten・hueの4つのブレンドモードを画像に適用した例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
    height: 800px;
    background-color: brown;
}
img {
    width: 33.3%;
    height: auto;
    float: left;
}
.demo1 {
    mix-blend-mode: normal;
}
.demo2 {
    mix-blend-mode: darken;
}
.demo3 {
    mix-blend-mode: lighten;
}
.demo4 {
    mix-blend-mode: hue;
}
</style>
</head>
<body>
<h2>Learn Xamarin</h2>
<div class="container">
<img src="https://www.tutorialspoint.com/xamarin/images/xamarin-mini-logo.jpg" alt="Xamarin" class="demo1" width="300" height="300">
<img src="https://www.tutorialspoint.com/xamarin/images/xamarin-mini-logo.jpg" alt="Xamarin" class="demo2" width="300" height="300">
<img src="https://www.tutorialspoint.com/xamarin/images/xamarin-mini-logo.jpg" alt="Xamarin" class="demo3" width="300" height="300">
<img src="https://www.tutorialspoint.com/xamarin/images/xamarin-mini-logo.jpg" alt="Xamarin" class="demo4" width="300" height="300">
</div>
<p><strong>注意:</strong> mix-blend-modeプロパティはInternet Explorerおよび旧版のEdgeではサポートされていません。</p>
</body>
</html>

実行結果①

CSSのmix-blend-modeプロパティとは？使い方とブレンドモード一覧を解説

サンプルコード②

続いて、color-dodge・color-burn・exclusion・saturationの4つのブレンドモードを適用した別の例です。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
    height: 800px;
    background-color: brown;
}
img {
    width: 33.3%;
    height: auto;
    float: left;
}
.demo1 {
    mix-blend-mode: color-dodge;
}
.demo2 {
    mix-blend-mode: color-burn;
}
.demo3 {
    mix-blend-mode: exclusion;
}
.demo4 {
    mix-blend-mode: saturation;
}
</style>
</head>
<body>
<h2>Learn Xamarin</h2>
<div class="container">
<img src="https://www.tutorialspoint.com/xamarin/images/xamarin-mini-logo.jpg" alt="Xamarin" class="demo1" width="300" height="300">
<img src="https://www.tutorialspoint.com/xamarin/images/xamarin-mini-logo.jpg" alt="Xamarin" class="demo2" width="300" height="300">
<img src="https://www.tutorialspoint.com/xamarin/images/xamarin-mini-logo.jpg" alt="Xamarin" class="demo3" width="300" height="300">
<img src="https://www.tutorialspoint.com/xamarin/images/xamarin-mini-logo.jpg" alt="Xamarin" class="demo4" width="300" height="300">
</div>
<p><strong>注意:</strong> mix-blend-modeプロパティはInternet Explorerおよび旧版のEdgeではサポートされていません。</p>
</body>
</html>

実行結果②

CSSのmix-blend-modeプロパティとは？使い方とブレンドモード一覧を解説

まとめ

mix-blend-modeプロパティを使うことで、要素と親要素の背景をさまざまな方法でブレンドでき、デザインの幅が大きく広がります。各ブレンドモードの特徴を理解し、目的に応じて使い分けましょう。なお、最新の主要ブラウザ（Chrome、Firefox、Safari、新版Edge）では問題なく動作しますが、Internet Explorerでは利用できない点に注意してください。

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

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

  2. CSSのpointer-eventsプロパティとは？使い方をコード例で解説

    pointer-eventsプロパティとは CSSのpointer-eventsプロパティは、要素に対してポインターイベントが発生した際に、その要素がアクション（反応）を行うかどうかを指定するためのプロパティです。ポインターイベントは、マウスのクリック、タッチ操作、スタイラスペンなど、さまざまな入力デバイスによって発生します。 このプロパティを活用すると、リンクやボタンへのクリック・ホバー操作を無効化したり、逆に有効化したりできます。主な値は以下のとおりです。 auto：デフォルトの動作。要素が通常どおりポインターイベントに反応します。 none：要素がポインターイベントに反応しなくなります