要素が重なった際の見え方を指定できるmix-blend-modeを使ってみます。
サンプルコード
mix-blend-modeで設定できるキーワード値は以下になります。
| normal | 標準。重なった色が何であるかに関わらず、上の色が最終的な色になる。 |
|---|---|
| darken | 比較(暗)。重なった色を比較して、最も暗い値が最終的な色になる。 |
| multiply | 乗算。重なった色を掛け合わせた結果が最終的な色になる。 |
| color-burn | 焼き込みカラー。反転した下の色を上の色で除算して、さらに反転した結果が最終的な色になる。 |
| lighten | 比較(明)。重なった色を比較して、最も明るい値が最終的な色になる。 |
| screen | スクリーン。色を反転して乗算を行い、さらに色を反転した結果が最終的な色になる。 |
| color-dodge | 覆い焼きカラー。下の色を、反転した上の色で除算した結果が、最終的な色になる。 |
| overlay | オーバーレイ。下の色が暗ければ multiply、下の色が明るければ screen の結果が最終的な色になる。 |
| hard-light | ハードライト。上の色が暗い色であれば multiply 、明るい色であれば screen の結果が最終的な色になる。 |
| soft-light | ソフトライト。最終的な色は hard-light に似ているが、よりソフトになる。 |
| difference | 差異。重なった色のうち明るい色から、暗い色を減算した結果が最終的な色になる。 |
| exclusion | 除外。最終的な色は difference に似ているが、コントラストが低くなる。 |
| hue | 色相。上の色の色相と、下の色の彩度・明度を持つ色になる。 |
| saturation | 彩度。上の色の彩度と、下の色の色相・明度を持つ色になる。 |
| color | カラー。上の色の色相・彩度と、下の色の明度を持つ色になる。 |
| luminosity | 輝度。上の色の明度と、下の色の色相・彩度を持つ色になる。 |
各値がどのような見え方になるのかをいくつか試してみます。
まずは赤・青・緑の背景色の要素をずらして重ねてみます。
<div class="wrap normal"> <p>normal(標準)</p> <div class="box red"></div> <div class="box blue"></div> <div class="box green"></div> </div> 〜 略 〜 <div class="wrap luminosity"> <p>luminosity(輝度)</p> <div class="box red"></div> <div class="box blue"></div> <div class="box green"></div> </div>
それぞれの重ねる要素に対して、mix-blend-modeを設定します。
.box {
position: absolute;
width: 100px;
height: 100px;
border-radius: 50%;
}
.normal .box {
mix-blend-mode: normal;
}
〜 略 〜
.luminosity .box {
mix-blend-mode: luminosity;
}
.red {
top: 25px;
left: 50px;
background-color: red;
}
.blue {
bottom: 25px;
right: 25px;
background-color: blue;
}
.green {
bottom: 25px;
left: 25px;
background-color: green;
}
次に画像の上に黒・白・赤の文字色のテキストを重ねてみます。
<div class="wrap normal"> <p class="head">normal(標準)</p> <p class="text top black">TEXT</p> <p class="text top red">TEXT</p> <p class="text top white">TEXT</p> <p class="text bottom black">TEXT</p> <p class="text bottom red">TEXT</p> <p class="text bottom white">TEXT</p> </div> 〜 略 〜 <div class="wrap luminosity"> <p class="head">luminosity(輝度)</p> <p class="text top black">TEXT</p> <p class="text top red">TEXT</p> <p class="text top white">TEXT</p> <p class="text bottom black">TEXT</p> <p class="text bottom red">TEXT</p> <p class="text bottom white">TEXT</p> </div>
それぞれの重ねるテキストに対して、mix-blend-modeを設定します。
.wrap {
position: relative;
background: url(img.jpg) center center no-repeat;
background-size: cover;
}
.text {
position: absolute;
}
.normal .text {
mix-blend-mode: normal;
}
〜 略 〜
.luminosity .text {
mix-blend-mode: luminosity;
}
.top {
top: 30px;
}
.bottom {
bottom: 20px;
}
.black {
left: 20px;
color: black;
}
.white {
right: 20px;
color: white;
}
.red {
left: 50%;
color: red;
translate: -50% 0;
}
コメントが承認されるまで時間がかかります。