一つの画像で違った見え方の背景にするトリック 『Background Image Trickery』

WS002574
このエントリーをはてなブックマークに追加
PR

Background Image Trickery
By Bram de Haan 

DEMO 表示

背景をスクロールすると何かフィルターを掛けたかのように感じる変化をします
これは背景画像と背景色をうまく使ったトリックで、トリックのタネは背景の画像です

画像がPNGで一部透明になっているのがポイントです

一部を透明にすることで、その色を自在にCSSで着色しているかのように出来る

 

 

WS002575

上の方の白い部分は透明になっているところを白くしています、実際には矢印の周りには薄く白色をまとっています

下の方は矢印の白で囲まれている所以外が透明で、背景色を矢印内の色と合わせてあります

 

 

CSSでどんなことをしているのかな?

背景画像をfixedで固定します、これによって要素間での背景のズレがなくなり一致します

background-attachment: fixed;

あとは要素ごとに背景の色と背景の画像を指定するだけです

 

 

コードをダウンロードする

DOWNLOAD
PR

COMMENT

コメントを残す

PR

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

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

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

Twitter Facebook Google+ Feedly RSS

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