サンプル

See the Pen Codepen by Tora (@webtoranomaki) on CodePen.

コード

この記事の目次

html

まずは背景画像を表示させる「.bg」ボックス、そしてそこに「.text」ボックスを内包させます。

css

「.bg」に表示させる背景画像やサイズなどの一般的なスタイルを設定してきます。

次に「.text」には、文字サイズや書体の一般的なスタイルを設定します。

次に「color: rgba(0, 0, 0, 0.2);」で、文字の色と透明度を設定し、「mix-blend-mode」でブレンドモード(描画モード)の設定します。 ブレンドモード(描画モード) には以下の15個の値が用意されています。

darken

重なる部分の両方の色を比較し、暗い方が適用されます。日本語でいう「比較(暗)」というブレンドモードです。

lighten

重なる部分の両方の色を比較し、明るい方が適用されます。日本語でいう「比較(明)」というブレンドモードです。

multiply

色と色が重なる部分を暗くします。重ねれば重ねるほど暗くなります。日本語でいう「乗算」というブレンドモードです。

screen

色と色が重なる部分を明るくします。重ねれば重ねるほど明るくなります。日本語でいう「スクリーン」というブレンドモードです。

color-burn

基本の色相を保ちながら、色と色が重なる部分を暗くします。コントラストを高くします。日本語でいう「焼き込み」というブレンドモードです。

color-dodge

基本の色相を保ちながら、色と色が重なる部分を明るくし、コントラストを高くします。日本語でいう「覆い焼き」というブレンドモードです。

overlay

下のレイヤーの色が暗いと「乗算」、明るいと「スクリーン」が適用されます。日本語でいう「オーバーレイ」というブレンドモードです。

soft-light

オーバーレイよりもコントラストが弱いブレンドです。日本語でいう「ソフトライト」というブレンドモードです。

hard-light

オーバーレイよりもコントラストが強いブレンドです。日本語でいう「ハードライト」というブレンドモードです。

difference

明度の大きい方から小さい方の数値が引かれて合成されます。白を重ねると色が反転し、黒は変化はありません。日本語でいう「差の絶対値」というブレンドモードです。

exclusion

差の絶対値よりもコントラストが弱いブレンドです。日本語でいう「除外」というブレンドモードです。

hue

下のレイヤーの輝度と彩度を維持したまま、上のレイヤーの色相を合成します。日本語でいう「色相」というブレンドモードです。

saturation

下のレイヤーの輝度と色相を維持したまま、上のレイヤーの彩度を合成します。日本語でいう「彩度」というブレンドモードです。

color

下のレイヤーの輝度を維持したまま、上のレイヤーの色相と彩度を合成します。日本語でいう「カラー」というブレンドモードです。

luminosity

上のレイヤーの色の輝度が、下のレイヤーに合成されます。日本語でいう「彩度」というブレンドモードです。