CSS を使用してスケーラブルな背景画像を使用しています。背景画像と一緒に縮小したいアニメーション化されたフラッシュ ロゴを含む入れ子になった AP div を持つ div タグ コンテナーを使用しています。
一日中調べていた問題が 2 つありますが、解決できないようです。
画像をテストするためにブラウザを縮小すると、AP div の位置がずれて、あるべき正確な場所にとどまりません。ブラウザによっては少し上下に動きます。
Internet Explorer では動作しません。
私は多くの Q/A を読み、多くのフォーラムを訪れました。どんな助けでも大歓迎です。ありがとう!!!!!
サイト テストは、www.casadeoracionvida.org で表示できます。私が望む動作は、拡大縮小されているかどうかに関係なく、どのブラウザーでも、ロゴが常に白い点 (雲) の上にあることです。
これは私のコード全体です:
<head>
.imgwrapper {
height: 100%;
width: 100%;
}
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-image: url(img/bluesky.jpg);
background-repeat: no-repeat;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#logo {
position: absolute;
width: 23%;
height: 47%;
z-index: 1;
left: 40%;
top: 40%;
}
</head>
<body>
<div class="imgwrapper"> <div id="logo">
<object id="FlashID" width="100%" height="100%">
<param name="movie" value="logo1.swf" /> </div> </div>
</body>
</html>