html - HTMLで複数の画像を1つの画像に表示するにはどうすればよいですか

Question

HTMLを使って1枚の大きな画像を表示したい。この大きな画像に、複数の小さな画像をすべて異なる場所とサイズで表示したいと考えています。

HTMLのみを使用してこれを行うことをお勧めします。しかし、これが不可能な場合は、Javascript またはそのようなものもオプションです.

私は Web と StackOverflow を検索し、多くの可能な解決策を試しましたが、1 つの大きな画像を表示し、この大きな画像の上に他の複数の画像を表示することはできませんでした。

どんな助けでも大歓迎です。

敬具、マイケル

score 2 · Accepted Answer

小さな画像をすべて含むコンテナ div を使用できます。その特定の div の背景を設定できます。

あなたのhtmlとして

<div id="container">

</div>

および css は次のとおりです。

div#container{

        background-image: url("image.jpg");
        background-repeat:no-repeat;
        height:100%;
    }

score 0 · Accepted Answer

純粋な HTML のみで画像を別の画像の上に重ねることはできませんが、できることは、画像の位置を別のタグに再配置し、それに応じて css で移動することです。

score 0 · Accepted Answer

2 つの選択肢:

CSS を使用して大きな画像を背景として定義すると、任意の HTML マークアップをその上に配置できます。divこのようなバックゴーンドは、ページ全体だけでなく、sなどの要素に対しても宣言できます。
スタイル定義内で絶対配置を使用します。このようにして、大きい画像と小さい画像をマークアップに追加し、それらを重ねて配置できます。

これには JavaScript は必要なく、php はこれとは何の関係もありません。

score 0 · Accepted Answer

この JSFiddle で行ったように、それらを配置できます: http://jsfiddle.net/xxUpk/

これtop:-NNNpxは大雑把ですが、floatそれらを配置する他の多くの方法を使用できます。それらを重ねることも検討しz-indexてください。

4 に答える 4