[CSS]透過画像を使用して幻想的な背景をつくりだすスタイルシート

ユーザーのスクロール操作をトリガーにして、グラデーション画像に透過画像を重ねて幻想的な背景をつくりだすスタイルシートをFive Finger Codingから紹介します。

CSS trick for a scrolling transparent background effect
demo

全体のイメージは下記のようになります。

スクロール前

一番下までスクロールすると、

スクロール後

仕組みは、透過PNG画像を固定配置し、レッドからブラックへのグラデーション画像がスクロールされると、ブラックになった時点で絵柄が浮き上がるものとなっています。
グラデーション画像は「gradient-tile.jpg」を使用しています。

IE6では透過PNG画像の背景が固定配置で繰り返すことができないため、シンプルな解決方法として透過PNG画像の背景を非表示にしています。

スタイルシートもシンプルです。

* html #wrapper {background-image: none;}

Post on:2009年12月3日