透明にしないでテクスチャ

ここまで散々透明透明言ってきましたが、CSSを使えば、わざわざ透明にしなくても、透明テクスチャみたく、背景色や下の画像を活かしたままテクスチャを乗せることができます。そう、ブレンドモードです。CSSのブレンドモードを使えば、jpg画像のテクスチャだって重ねられるんです:O。

ブレンドモード

Photoshopで言うところの、レイヤーの描画モード（乗算とかオーバーレイとか）と同じように、CSSにはブレンドモードというのがあります。
ブレンドモードとは、重なり合った色の混ぜ方を指定するということ。ブラウザ上で、Photoshopの描画モードと同じような効果を表現することができるんですねー！

CSSではふたつ、background-blend-modeプロパティと、mix-blend-modeプロパティで、ブレンドモードが使えます。
background-blend-modeは、backgroundプロパティで指定した背景色と背景画像の色の混ざり方を指定するのに対して、mix-blend-modeは、重なっている要素の色の混ざり方を指定します。

ブレンドモードが使えるプロパティ

background-blend-mode（バックグラウンド・ブレンド・モード）
background-colorと重なった時のbackground-imageの色の混ざり方、background-image同士の色の混ざり方を指定します。
mix-blend-mode（ミックス・ブレンド・モード）
上に重った要素の、下要素との色の混ざり方を指定します（上に重なる要素に指定しないと意味ないです）。
background-blend-mode、mix-blend-modeともに、指定できる値（ブレンドモード）は以下の通り。ちょっと足らないのがあるけれど、ほとんどPhotoshopと同じですねー:D。
  • normal（通常）
  • darken（比較(暗)）
  • multiply（乗算）
  • color-burn（焼き込み）
  • lighten（比較(明)）
  • screen（スクリーン）
  • color-dodge（覆い焼き）
  • overlay（オーバーレイ）
  • soft-light（ソフトライト）
  • hard-light（ハードライト）
  • difference（差の絶対値）
  • exclusion（除外）
  • hue（色相）
  • saturation（彩度）
  • color（カラー）
  • luminosity（輝度）

Photoshopの描画モードとbackground-blend-mode、mix-blend-modeを比較してみるとこんな感じ。

background-blend-modeプロパティを使ってみる

ここでは、以下のようなHTMLとCSSを用意しました。
HTMLは、main要素の中にsection要素をふたつ。片方は背景画像と背景色を指定する用、もう片方は背景画像だけを指定する用です。

<main>
	<section class="color paper">
		<h1>背景色付き</h1>
	</section>
	<section class="paper">
		<h1>背景色なし</h1>
	</section>
</main>

CSSは、背景画像を指定するpaperというクラスと、背景色を指定するcolorというクラスを用意します。
ブレンドモードは、section要素どちらともにhard-light（ハードライト）を指定することにしました。
背景画像には、「紙テクスチャ」で使ったのと同じ、画用紙テクスチャを使います（下図）。

watercolor.jpg
main {
	background-color: #86c0de;
}
section {
	background: transparent center / 500px;
	background-blend-mode: hard-light;
}
.paper {
	background-image: url(../img/watercolor.jpg);
}
.color {
	background-color: #553968;
}

背景色付き（左）の方は、まるで紫色の画用紙みたくなってますけれど、背景色なし（右）の方は、グレーのテクスチャ画像のままですね。その下の水色とは混ざりません。background-blend-modeプロパティでは、あくまで、backgroundプロパティで指定した値に対してブレンドモードが適用されるということなんですね。
下の要素との色の混ざりを表現する場合は、mix-blend-modeを使うとよいです:)。

mix-blend-modeプロパティを使ってみる

前述のbackground-blend-modeプロパティのサンプルに、さらにmix-blend-modeの指定を追記してみます。ブレンドモードは同じくhard-light（ハードライト）を指定。

section {
	︙
	background: transparent center / 500px;
	background-blend-mode: hard-light;
	mix-blend-mode: hard-light;
}

ブレンドされました。けど、section要素ごとブレンドされてるからか、テキストもなんだかちょっと滲んじゃって見えますね…、背景画像だけブレンドされればよかったんだけどな…。そんな時には、背景画像だけ別の要素に表示させて、その要素にだけmix-blend-modeを指定すればよいです;)。ここではHTMLはそのままに、section要素全面を覆うようにbefore擬似要素を作って、そこに背景画像を表示してみました。

section::before {
	content: "";
	position: absolute;
	︙
	background: transparent center / 500px;
	background-blend-mode: hard-light;
	mix-blend-mode: hard-light;
}
.paper::before {
	background-image: url(../../img/texture_watercolor.jpg);
}
.color::before {
	background-color: #553968;
}
h1 {
	position: relative;
	margin: 0;
	︙
}

擬似要素にpositionプロパティでabsoluteを指定しているため、画像がテキストの上に被ってしまいます。h1要素にもpositionプロパティでrelative（static以外）を指定することで、テキストが画像に隠れないようにしています。