【CSS】適度な不思議感。Flashの手前にオブジェクトを配置する方法
Adobeがモバイル向けFlashの開発中止を発表したこんなご時世にレガシーなテクニックを一つ。個人的にもサイト構築にFlashを使う事は殆んど無くなってきたのですが、依頼が入ったので、備忘に記します。
良い写真を文字で邪魔する
HTML
<div class="box"> <object type="application/x-shockwave-flash" id="flash" data="/wp-content/uploads/2011/11/slideshow.swf" width="300" height="200"> <param name="movie" value="/wp-content/uploads/2011/11/slideshow.swf" /> <param name="wmode" value="opaque" /> </object> <p class="text">良い写真を文字で邪魔する</p> </div>
CSS
.box { position:relative; z-index:1; width:300px; height:200px; } .text { position:absolute; z-index:10; width:100%; height:2em; top:50%; left:0; color:#fff; font-weight:bold; line-height:2em; text-align:center; margin-top:-0.5em; overflow:-webkit-marquee; white-space: nowrap; }
ポイント
Flashを入れているdivの中に、position:absolute; で z-index:10; なテキストエリアを乗せています。
大切なのは <param name=”wmode” value=”opaque” /> をFlashに記載することです。
Flashはでしゃばりで、がむしゃらに前に出てこようとするので、この条件が整わないと背景化できません。
それ、イスタンブールの写真じゃないですか!?
邪魔っぷりが素敵~((´∀`))☆☆☆☆☆