プロならではのアイデアが満載! WEBレイアウトのネタ帖 第1回 写真を生かしながら多くの文章を表示できるレイアウト |
POINT E
文字と背景画像の間に透過PNGを配置する
●「.textBox:hover」の背景画像に透過PNGを配置する ●「.textBox」にはbackground-imageをnoneにする |
このように、ロールオーバーを使うことで、一度に表示されるのは、ひとつの文字ブロックだけになるので、背景画像の写真も生きるし、大量の文章を少ないスペースで表示することが可能になる。
また、JavaScriptを書くことなく、また少ない画像で実現できるのもメリットといえる。しかし、透過PNGに対応していないIE 6にも対応させるには、各文字ブロックごとに背景画像を用意したり、JavaScriptで制御するなどの工夫が必要になる。
終わり 記事TOPへ >>>
本記事は『web creators』2008 vol.74よりの転載です
月刊『web creators』掲載記事号の情報はこちら!>>>