アルファチャンネルを持った画像を重ね合わせてフィルターのような効果を狙ってみる
ここ最近ずっと関わってきた仕事で、複数のpng画像をHTMLで重ねて表示させるようなモノを作りました。
その時は特に深いことは考えていませんでしたが、なんか別に使えそうな気がしてメモしておきます。
なお、IEではαチャンネルのついたpng画像を正常に表示できないので、このサンプルはまともに見えません。IE以外の素直なブラウザでご覧ください。
順序としてこんな感じ。
- 画像を用意する
- フィルターとして、透明度の高い画像を用意する
- HTML上で重ねて表示させる。
- フィルターの画像の枚数を増減させて表示を調整する
このサンプルでは、PhotoshopでできることをHTMLでもできるようにしただけど、やり方次第ではもっと遊べそうな気がする。