mix-blend-modeプロパティは、背景色と要素のブレンド方法を指定する際に使用します。
mix-blend-modeプロパティの各値を指定した際の表示結果は、 フォトショップなどのグラフィックソフトで、 下レイヤーと上レイヤーの色を掛け合わせたときの効果を想定するとイメージしやすいでしょう。
h5.m { margin-bottom: 0; } div.murasaki { background-color: purple; width: 150px; height: 200px; }
<p> サンプル要素として使用するのは、一部が透明なGIF画像です。<br> <img src="../images/michelangelo.gif"> </p> <h5 class="m">mix-blend-mode: normal;</h5> <div class="murasaki"> <img style="mix-blend-mode: normal;" src="../images/michelangelo.gif"> </div> <h5 class="m">mix-blend-mode: multiply;</h5> <div class="murasaki"> <img style="mix-blend-mode: multiply;" src="../images/michelangelo.gif"> </div> <h5 class="m">mix-blend-mode: screen;</h5> <div class="murasaki"> <img style="mix-blend-mode: screen;" src="../images/michelangelo.gif"> </div> <h5 class="m">mix-blend-mode: overlay;</h5> <div class="murasaki"> <img style="mix-blend-mode: overlay;" src="../images/michelangelo.gif"> </div> <h5 class="m">mix-blend-mode: darken;</h5> <div class="murasaki"> <img style="mix-blend-mode: darken;" src="../images/michelangelo.gif"> </div> <h5 class="m">mix-blend-mode: lighten;</h5> <div class="murasaki"> <img style="mix-blend-mode: lighten;" src="../images/michelangelo.gif"> </div> <h5 class="m">mix-blend-mode: color-dodge;</h5> <div class="murasaki"> <img style="mix-blend-mode: color-dodge;" src="../images/michelangelo.gif"> </div> <h5 class="m">mix-blend-mode: color-burn;</h5> <div class="murasaki"> <img style="mix-blend-mode: color-burn;" src="../images/michelangelo.gif"> </div> <h5 class="m">mix-blend-mode: hard-light;</h5> <div class="murasaki"> <img style="mix-blend-mode: hard-light;" src="../images/michelangelo.gif"> </div> <h5 class="m">mix-blend-mode: soft-light;</h5> <div class="murasaki"> <img style="mix-blend-mode: soft-light;" src="../images/michelangelo.gif"> </div> <h5 class="m">mix-blend-mode: difference;</h5> <div class="murasaki"> <img style="mix-blend-mode: difference;" src="../images/michelangelo.gif"> </div> <h5 class="m">mix-blend-mode: exclusion;</h5> <div class="murasaki"> <img style="mix-blend-mode: exclusion;" src="../images/michelangelo.gif"> </div> <h5 class="m">mix-blend-mode: hue;</h5> <div class="murasaki"> <img style="mix-blend-mode: hue;" src="../images/michelangelo.gif"> </div> <h5 class="m">mix-blend-mode: saturation;</h5> <div class="murasaki"> <img style="mix-blend-mode: saturation;" src="../images/michelangelo.gif"> </div> <h5 class="m">mix-blend-mode: color;</h5> <div class="murasaki"> <img style="mix-blend-mode: color;" src="../images/michelangelo.gif"> </div> <h5 class="m">mix-blend-mode: luminosity;</h5> <div class="murasaki"> <img style="mix-blend-mode: luminosity;" src="../images/michelangelo.gif"> </div>
サンプル要素として使用するのは、一部が透明なGIF画像です。