CSSのmix-blend-modeを使ってみる

要素が重なった際の見え方を指定できるmix-blend-modeを使ってみます。

サンプルコード

mix-blend-modeで設定できるキーワード値は以下になります。

各値がどのような見え方になるのかをいくつか試してみます。
まずは赤・青・緑の背景色の要素をずらして重ねてみます。

<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;
}

mix-blend-modeのデモページ

次に画像の上に黒・白・赤の文字色のテキストを重ねてみます。

<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;
}

mix-blend-modeのデモページ2