background-blend-mode: overlay; を使って、画像、グラデーションを重ねて表示させる方法

CSS の background-blend-mode を使って

背景と画像
背景と画像とグラデーション
背景とグラデーション

といったように複数の背景を指定した場合に

画像編集ソフトでお馴染みのブレンドモードを

CSSのみで行うことが出来る (今回はoverlayを使ったデモ)

DEMO

コード

CSS

body {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #444;
  background-image:
    url(plane-330488.jpg),
    linear-gradient(0deg, #ed5565, transparent),
    linear-gradient(45deg, #fc6e51, transparent),
    linear-gradient(90deg, #ffce54, transparent),
    linear-gradient(135deg, #a0d468, transparent),
    linear-gradient(180deg, #48cfad, transparent),
    linear-gradient(225deg, #4fc1e9, transparent),
    linear-gradient(270deg, #5d9cec, transparent),
    linear-gradient(315deg, #ac92ec, transparent);
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  background-blend-mode: overlay;
}

background blend mode を使う場合には

背景色がないとダメなようです

今回のデモでは、グラデーションと画像を使っています

レインボーなグラデーションと、飛行機の写真、背景色は＃444 となっています

今回は、背景の画像やグラデーションをブレンドしましたが

別の重なりあう要素同士もブレンドすることが出来るようです

まだ、まだ使えるブラウザが限られていますので、対応したブラウザで御覧ください

（Chromeで確認しています）

参考 URL

http://codepen.io/tatsuya/pen/Jyprw

http://dev.w3.org/fxtf/compositing-1/