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

background-blend-mode: overlay; を使って、画像、グラデーションを重ねて表示させる方法
このエントリーをはてなブックマークに追加
PR

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/

PR

COMMENT

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー CC0 PHOTO 無料で使える高画質な写真をダウンロード、クレジット表記、リンク不要

9ineBBの最新情報をチェック・購読

Twitter Facebook Google+ Feedly RSS

どこをクリックしてもこの表示を消せます
(3日後以降に再度表示されます)