CSS mix-blend-modeプロパティ
例
画像要素を親コンテナの背景（黄色）と混ぜ合わせると、画像が暗くなります：
.container {
background-color: yellow;
padding: 15px;
}
.container img {
mix-blend-mode: darken;
}
試してみる »
タグの定義と使用説明
mix-blend-mode プロパティは、要素のコンテンツを、要素の直接の親要素のコンテンツおよび要素の背景とどのように混ぜ合わせるかを指定します。
| 初期値: | normal |
|---|---|
| 継承: | なし。 |
| アニメーション: | なし。関連CSS アニメーション |
| JavaScript 構文: | object.style.mixBlendMode = "darken" 試してみる » |
ブラウザサポート
表内の数字は、そのプロパティをサポートする最初のブラウザバージョンを示します。
| プロパティ | |||||
|---|---|---|---|---|---|
| mix-blend-mode | 41.0 | 79.0 | 32.0 | 8.0 | 35.0 |
構文
mix-blend-mod: <blend-mode><blend-mode> の値は以下のいずれかです：
mix-blend-mode: normal; mix-blend-mode: multiply; mix-blend-mode: screen; mix-blend-mode: overlay; mix-blend-mode: darken; mix-blend-mode: lighten; mix-blend-mode: color-dodge mix-blend-mode: color-burn; mix-blend-mode: hard-light; mix-blend-mode: soft-light; mix-blend-mode: difference; mix-blend-mode: exclusion; mix-blend-mode: hue; mix-blend-mode: saturation; mix-blend-mode: color; mix-blend-mode: luminosity;
複数の値はカンマで区切ることができます。
例
さまざまな混合モードの例：
.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;}
試してみる »