- 2009-02-06 (金) 15:32
- CSS | HTML&XHTML
Flashを背景にしてるっぽく見せる手法についてのメモ。
Flashサイトにはしたくないけど背景をガシガシ動かしたい、みたいな時（無さそうだけど）に使えるんじゃないかなー。
まず普通に背景にしたいFlashと内容を追加する。flashのソースについては「ValidなFlash表示ソース」参照。
HTML:
-
<div id="content">
-
<object type="application/x-shockwave-flash" width="500" height="300" title="title" data="index.swf">
-
<param name="movie" value="index.swf" />
-
<param name="quality" value="high" />
-
</object>
-
<div class="section">
-
<h2>Flash Background sample</h2>
-
<p>背景をガンガン動かしたいならこんな手法もあるよっていう。</p>
-
</div>
-
</div>
今更感漂うけど続くよー
Flashのソースはこれだけだとz-index幾ら指定しても背景になってくれんので、以下を追加する。
HTML:
-
<param name="wmode" value="transparent" />
このパラメータは、lightbox使ったときにflashが上に来る問題の解消でお馴染みのアレ。
あとは普通にCSSを書く
CSS:
-
#content {
-
width:500px;
-
height:300px;
-
margin:0 auto;
-
position:relative;
-
}
-
#content object {
-
position:absolute;
-
top:0;
-
left:0;
-
z-index:0;
-
}
-
#content .section {
-
position:absolute;
-
top:30px;
-
left:30px;
-
margin:0;
-
z-index:5;
-
width:440px;
-
background-color:#fff;
-
}
スタイルシートでのポイントは
- objectをposition:absoluteにしてz-indexを0にする
- flashの上に乗せたい要素のz-indexを0より大きくして配置する
以上２点。
positionまみれになってしまうものの、flashを背景っぽくすることが出来ます。
関連記事
- Newer: [mootools] Button CSS Generator
- Older: [mootools]押されたキーを取得する
