私たちはカジノサイトを独自にレビューしています。当社のリンクを通じてサインアップすると、追加料金なしで当社に手数料が発生する場合があります。
background-blend-modeプロパティは、背景色と背景画像のブレンド方法を指定する際に使用します。
background-blend-modeプロパティの各値を指定した際の表示結果は、
フォトショップなどのグラフィックソフトで、
下レイヤーと上レイヤーの色を掛け合わせたときの効果を想定するとイメージしやすいでしょう。
以下の値から、カンマ区切りで複数指定できる。
h5.m { margin-bottom: 0; } div.murasaki { background-color: purple; background-image: url(../images/michelangelo.gif); background-repeat: no-repeat; width: 150px; height: 200px; }
<p> 背景画像として使用するのは、一部が透明なGIF画像です。<br> <img src="https://htmqcom1.wpengine.com/wp-content/uploads/2024/07/michelangelo.gif"> </p> <h5 class="m">background-blend-mode: normal;</h5> <div class="murasaki" style="background-blend-mode: normal;"> </div> <h5 class="m">background-blend-mode: multiply;</h5> <div class="murasaki" style="background-blend-mode: multiply;"> </div> <h5 class="m">background-blend-mode: screen;</h5> <div class="murasaki" style="background-blend-mode: screen;"> </div> <h5 class="m">background-blend-mode: overlay;</h5> <div class="murasaki" style="background-blend-mode: overlay;"> </div> <h5 class="m">background-blend-mode: darken;</h5> <div class="murasaki" style="background-blend-mode: darken;"> </div> <h5 class="m">background-blend-mode: lighten;</h5> <div class="murasaki" style="background-blend-mode: lighten;"> </div> <h5 class="m">background-blend-mode: color-dodge;</h5> <div class="murasaki" style="background-blend-mode: color-dodge;"> </div> <h5 class="m">background-blend-mode: color-burn;</h5> <div class="murasaki" style="background-blend-mode: color-burn;"> </div> <h5 class="m">background-blend-mode: hard-light;</h5> <div class="murasaki" style="background-blend-mode: hard-light;"> </div> <h5 class="m">background-blend-mode: soft-light;</h5> <div class="murasaki" style="background-blend-mode: soft-light;"> </div> <h5 class="m">background-blend-mode: difference;</h5> <div class="murasaki" style="background-blend-mode: difference;"> </div> <h5 class="m">background-blend-mode: exclusion;</h5> <div class="murasaki" style="background-blend-mode: exclusion;"> </div> <h5 class="m">background-blend-mode: hue;</h5> <div class="murasaki" style="background-blend-mode: hue;"> </div> <h5 class="m">background-blend-mode: saturation;</h5> <div class="murasaki" style="background-blend-mode: saturation;"> </div> <h5 class="m">background-blend-mode: color;</h5> <div class="murasaki" style="background-blend-mode: color;"> </div> <h5 class="m">background-blend-mode: luminosity;</h5> <div class="murasaki" style="background-blend-mode: luminosity;"> </div>
背景画像として使用するのは、一部が透明なGIF画像です。