人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

GIFアニメーションとJPG画像を重ねて表示させる方法について、教えてください。
XHTML1.0でホームページを作成しました。
一部にgifアニメーションを入れるのですが、画像のサイズが大きいので、GIFアニメーションを作った時にサイズが大きくなってしまいました。
少しでも軽くしたいので、画像を動く部分と動かない部分に分けたのですが、重ねて表示する方法がうまく出来なくて困っています。
画像は上下左右の中央で揃える、ページを開いた時に左右は中央に表示するようにしたいです。
ページのイメージは画像のようにしたいのですが、どなたか教えてください。
わかりやすく教えていただけると助かります。お願いします。

1390995111
●拡大する


●質問者: nashie0306
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● a-kuma3
ベストアンサー

こんな感じで、どうでしょうか。

<style>
BODY {
 margin: 0;
 padding: 0;
}
/* 外側の JPEG */
.back {
 height: 900px; /* 高さを画像にあわせる */
 background-image: url(jpeg_image.jpg); /* JPG 画像の URL */
 background-position: center center;
 background-repeat: no-repeat;
 border: 1px solid red;
 position: absolute;
 width: 100%;
}
/* 内側の GIF */
.anime {
 position: absolute;
 top: 50%;
 margin-top: -400px; /* 画像の高さの半分 */
 left: 50%;
 margin-left: -325px; /* 画像の幅の半分 */
 display: block;
 border: 1px solid red;
}
/* 日付を表示する領域 */
.time-area {
 width: 100%;
 padding: 0 auto;
 padding-top: 10px; /* 高さ方向の位置を調整 */
}
</style>

<body>

<div class="back"> <!-- JPEG を表示するエリア -->
<center class="time-area"> <!-- 日付を表示するエリア -->
<script>
/* 日付を書くスクリプト */
document.write("2014年1月29日"); /* 本当は、画像で表示するところです */
</script>
</center>
<img class="anime" src="animation_gif.gif" /> <!-- アニメーション GIF -->
</div>

</body>

画像のサイズに依存した数値を三つほど書いちゃってるのが、イマイチなんですが。


nashie0306さんのコメント
ありがとうございます。 position: absolute;を使った時の他の要素の指定をうまくしないとダメなんですね。勉強になります。
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ