（6）POINT E　文字と背景画像の間に透過PNGを配置する

プロならではのアイデアが満載！ ＷＥＢレイアウトのネタ帖 第1回　写真を生かしながら多くの文章を表示できるレイアウト

POINT E
文字と背景画像の間に透過PNGを配置する

●「.textBox:hover」の背景画像に透過PNGを配置する ●「.textBox」にはbackground-imageをnoneにする

[1]	この状態で背景画像を設定すると、背景がじゃまで文章を読むことができない［1］。そこで、半透明の白いPNG画像を用意して「.textBox:hover」の背景画像として適用する。
[2]	「.textBox」に対しては、background-imageをnoneにすることで背景画像を消去する［2］。
[3] [4] [5] [6] [7]	これによって、ロールオーバーで背景画像の表示・非表示をコントロールできる［3］［4］［5］［6］［7］。

このように、ロールオーバーを使うことで、一度に表示されるのは、ひとつの文字ブロックだけになるので、背景画像の写真も生きるし、大量の文章を少ないスペースで表示することが可能になる。

また、JavaScriptを書くことなく、また少ない画像で実現できるのもメリットといえる。しかし、透過PNGに対応していないIE 6にも対応させるには、各文字ブロックごとに背景画像を用意したり、JavaScriptで制御するなどの工夫が必要になる。

終わり 記事TOPへ >>>


本記事は『web creators』2008 vol.74よりの転載です
月刊『web creators』掲載記事号の情報はこちら！>>>