html - HTML コードとウィジェットを画像に統合する方法

Question

ペイパルボタンやタイムカウントダウンなど、HTMLコードとウィジェットを画像に導入/挿入したい。魔法のようにそれを行うことは可能ですか?. すべての回答に感謝します。ヒントを教えてください。

Answer 1

私が言ったように。z-index css プロパティを使用します。div を取得し、画像の正確なサイズに設定し、マージンと z-index を使用して、その上にカウンターを配置します。

例として：

<div id="image">
   <div id="progress"> ... </div>
</div>

それぞれの css は次のようになります。

#image{
   width: 400px;
   height: 500px;
   z-index: 0;
}

#progress {
   z-index:10;
   margin-bottom: 20px;
}

幅と高さのプロパティは、画像のサイズのものでなければなりません。残りは、このコードを正確にどこに配置するか次第です。

Answer 2

他のいくつかの手がかりを与えてください。あなたが調べたことから、少しのcssだけでそれを達成できると思います。たとえば、css の z-index 5 の画像と、その上に配置したい z-index 6、7、10 のコンテンツは、画像の z-index より大きい限り気にしません。

次に、カウンター、少しグーグルで検索すると、JavaScript カウントダウンに関するチュートリアルがたくさん見つかります。