CSS mix-blend-mode 属性

定義と用法

mix-blend-mode 属性は、要素の内容が直接の親背景とどのように混ぜられるべきかを定義します。

また、参照してください：

CSS リファレンスマニュアル：CSS background-blend-mode 属性

例

赤い背景を持つコンテナと、この赤いコンテナと融合した画像（暗い）：

.container {
  background-color: red;
}
.container img {
  mix-blend-mode: darken;
}

自分で試してみてください

ページの下部にさらに多くの TIY 実例が見つかります。

CSS 言語

mix-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|color-burn|difference|exclusion|hue|saturation|color|luminosity;

属性値

値 説明
normal これはデフォルト値です。混合モードを通常に設定します。
multiply 混合モードを multiply に設定します。
screen 混合モードを screen に設定します。
overlay 混合モードを overlay に設定します。
darken 混合モードを darken に設定します。
lighten 混合モードを lighten に設定します。
color-dodge 混合モードを color-dodge に設定します。
color-burn 混合モードを color-burn に設定します。
difference 混合モードを difference に設定します。
exclusion 混合モードを exclusion に設定します。
hue 混合モードを hue に設定します。
saturation 混合モードを saturation に設定します。
color 混合モードを color に設定します。
luminosity 混合モードを luminosity に設定します。

技術的詳細

デフォルト値： normal
継承： いいえ
アニメーション作成： サポートされていません。参照してください：アニメーション関連属性。
JavaScript 言語： object.style.mixBlendMode = "darken"

さらに多くの例

例

すべての値を表示します：

.normal {mix-blend-mode: normal;}
.multiply {mix-blend-mode: multiply;}
.screen {mix-blend-mode: screen;}
.overlay {mix-blend-mode: overlay;}
.darken {mix-blend-mode: darken;}
.lighten {mix-blend-mode: lighten;}
.color-dodge {mix-blend-mode: color-dodge;}
.color-burn {mix-blend-mode: color-burn;}
.difference {mix-blend-mode: difference;}
.exclusion {mix-blend-mode: exclusion;}
.hue {mix-blend-mode: hue;}
.saturation {mix-blend-mode: saturation;}
.color {mix-blend-mode: color;}
.luminosity {mix-blend-mode: luminosity;}

自分で試してみてください

例

mix-blend-modeを使用して、レスポンシブなcutout/knockoutテキスト（抜き图テキスト）を作成する：

.image-container {
  background-image: url("paris.jpg");
  background-size: cover;
  position: relative;
  height: 300px;
}
.text {
  background-color: white;
  color: black;
  font-size: 10vw; 
  font-weight: bold;
  margin: 0 auto;
  padding: 10px;
  width: 50%;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  mix-blend-mode: screen;
}

自分で試してみてください

ブラウザのサポート

テーブルの数字は、その属性を完全にサポートする最初のブラウザのバージョンを示しています。

Chrome IE / Edge Firefox Safari Opera
41.0 79.0 32.0 8.0 35.0