0

背景画像の特定の要素に基づいてコンテンツを配置しようとしています。私は多くの調査を行ってきましたが、JavaScript を介して可能であるように思われますが、JavaScript の機能についてはあまり詳しくありません。

私が使用している背景画像は次のとおりです。http://dl.dropbox.com/u/4650892/bg2.jpg

その画像の 4 つのボックス内に情報が収まるようにしています。現時点では、次の CSS を使用して、背景画像がブラウザ内で完全なサイズに保たれるようにしています。

background-image: url('../images/bg2.jpg'); <br />
background-repeat:no-repeat; <br />
background-position:center center; <br />
background-attachment:fixed; <br />
-o-background-size: 100% 100%, auto; <br />
-moz-background-size: 100% 100%, auto; <br />
-webkit-background-size: 100% 100%, auto; <br />
background-size: 100% 100%, auto;

このコードは、私が達成しようとしていることに不可欠ではないかもしれませんが、完全にはわかりません。

コンテンツが 1 つの解像度のままであれば、コンテンツを配置するのは簡単ですが、ブラウザーのサイズが変更されるとすぐに、コンテンツは画像とは無関係に移動します。

どんな支援も大歓迎です！

4

2 に答える 2

2

バッファローの画像とその画像の他の要素を分けてもらえませんか？それとも、そのすべてが背景画像の一部である必要がありますか?

私だったら水牛の絵だけを背景にします。他の要素は HTML で作成します。必要に応じて、メディア クエリに基づいてサイズを変更できます。

于 2012-08-23T00:47:37.527 に答える
0

UI 全体を 1 つの画像全体に配置し、その上にテキストを適用すると、おそらく最も苦痛を感じるでしょう。

背景画像の唯一の要素として動物を使用し、その上に他の HTML 要素 (ロゴなど) を追加し、4 つのボックスを他のすべての下に再度追加することをお勧めします。

このようにして、CSS を使用してメイン グラフィック (つまり、ロゴと「近日公開予定」のテキスト) を中央に配置することができます。また、CSS を使用して固定比率に合わせてボックスのサイズを変更すると、ブラウザーの解像度に応じてより効果的にスケーリングされます。

于 2012-08-23T00:46:19.533 に答える