ブレンドモードを指定します：
div {
width:
200px;
height: 200px;
background-size: 200px 200px;
background-repeat:no-repeat;
background-image:
linear-gradient(to right, black 0%, white 100%), url('w3css.gif');
background-blend-mode: color-dodge;
}
Try it Yourself ❯
他の "Try it Yourself" 例が下にあります。
background-blend-mode プロパティは、各背景レイヤー（色や画像）のブレンドモードを定義します。
| デフォルト値： | normal |
|---|---|
| 継承： | 継承する |
| アニメーション可否： | 不可。animatable を参照 |
| バージョン： | CSS3 |
| JavaScript 構文： | object.style.backgroundBlendMode="screen" |
表中の数字は、完全にプロパティをサポートした最初のブラウザのバージョンです。
| プロパティ | |||||
|---|---|---|---|---|---|
| background-blend-mode | 35.0 | 未サポート | 30.0 | 7.1 | 22.0 |
background-blend-mode:
normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity;
| 値 | 説明 | Play it |
|---|---|---|
| normal | これがデフォルトです。normal にブレンドモードを設定します | Play it ❯ |
| multiply | multiply にブレンドモードを設定します | Play it ❯ |
| screen | screen にブレンドモードを設定します | Play it ❯ |
| overlay | overlay にブレンドモードを設定します | Play it ❯ |
| darken | darken にブレンドモードを設定します | Play it ❯ |
| lighten | lighten にブレンドモードを設定します | Play it ❯ |
| color-dodge | color-dodge にブレンドモードを設定します | Play it ❯ |
| saturation | saturation にブレンドモードを設定します | Play it ❯ |
| color | color にブレンドモードを設定します | Play it ❯ |
| luminosity | luminosity にブレンドモードを設定します | Play it ❯ |
CSS チュートリアル： CSS Background