| 属性名 | background-blend-mode |
|---|---|
| 値 | blend-mode, ... |
| 値の詳細 |
blend-mode = normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-lignt | soft-light | difference | exclutsion | hue | saturation | color | luminosity |
| 初期値 | normal |
| 適用可能要素 | 全ての要素 |
| 継承 | 継承しない |
| メディア | visual |
| CSS | IE/Edge | Firefox | Chrome | Opera | Safari |
|---|---|---|---|---|---|
| CSS2 | 未 | 30 | 35 | 22 | 7.1 |
background-image などによる背景と、さらにその下側にある背景が重なる部分の、色のブレンド方式を指定します。複数指定する場合は、background-image と同じように指定します。
| 値 | 説明 |
|---|---|
| normal | ブレンドしません。要素の色をそのまま表示します。 |
| multiply | 背景色と要素の色を掛け合わせた色にします。 |
| screen | 背景色の補色と、要素の色の補色を掛け合わせた色の補色を取ります。 |
| overlay | 背景色に応じて、multiply または screen されます。 |
| darken | 背景色と要素色の暗い方の色にします。 |
| lighten | 背景色と要素色の明るい方の色にします。 |
| color-dodge | 要素色を反映して背景色を明るくします。 |
| color-burn | 要素色を反映して背景色を暗くします。 |
| hard-lignt | 要素色に応じて、multiply または screen されます。背景に強いスポットライトを当てた具合になります。 |
| soft-light | 要素色に応じて、darken または lighten されます。背景に拡散スポットライトを当てた具合になります。 |
| difference | 背景色と要素色の差の絶対値とします。 |
| exclutsion | difference と同様ですが、コントラストが弱くなります。 |
| hue | 要素色の色相と、背景色の彩度と光度を合わせた色にします。 |
| saturation | 要素色の彩度と、背景色の色相と光度を合わせた色にします。 |
| color | 要素色の色相と彩度と、背景色の光度を合わせた色にします。 |
| luminosity | 要素色の光度と、背景色の色相と彩度を合わせた色にします。 |
body {
background-color: green;
}
div {
width: 200px;
height: 200px;
background-size: 200px 200px;
background-repeat:no-repeat;
background-image: linear-gradient(to right, #000000 0%,#ffffff 100%), url('ducky.png');
background-blend-mode: difference, normal;
}
<body> <div></div> </body>