透過するデザインでのサイト制作

このサイトを作る際少し苦労をしたので実現方法を紹介したいと思います。

ボタンなどの画像の背景を透明にする場合は透過GIFで簡単に制作できますが
今回のサイトは背景を半透明にして何枚も透けるイメージにしたかった。
CSSなどで背景色を指定するだけでは不透明となり透けません。
ググってみると透過PIGを使う方法が紹介されていました。
そのまま画像を使うとIE7以前では透過しない問題発生。

そこでIE7以前でも表示を実現できるスグレモノを見つけました。
透過PNG と IE と IE7　まとめ
このプログラムを作って紹介してくれているユンサンに感謝致します！

CSSで指定した背景画像にも適応できるし、htmlに挿入している画像にもidやclassを割り当てる事で使用可能です。
（その際画像にはwidth="???" height="???"とサイズ指定しないと拡大表示されてしまうので注意が必要）

このサイトでは単色の透過PNG画像を使いbodyに指定した画像が透けるようにしました。

僕がやっていてつまずいた点は画像の制作に問題がありました。
透過PNGを制作し保存する際の指定がおかしかったみたい。
僕、適当なんで原因は追究せず勢いやってしまってますが...。
うまくいかなかった場合画像の保存時の設定も色々やってみてください。
きっと解決できるはずです。

僕は4日程かかっちゃいましたが。

僕に聞いてもハギレのよい答えは返ってこないので試行錯誤するのだ！

ブログランキングに参加しています。
よろしければクリックしてもらえるとうれしいです。