Html画像上の画像

Z-indexまたはZ-orderを使用せずに別の画像に画像を追加する方法を教えてもらえますか？ background-imageプロパティHtml画像上の画像

2009-07-02 Adrian Pirvulescu

あなたが達成したいことを正確に知らなくても正しく答えるのは難しいですが、Z-indexはおそらく実際に必要なものではありません。たとえば、次のように動作します：

<div id="container"> 
    <img src="img1.jpg" id="img1" /> 
    <img src="img2.jpg" id="img2" /> 
</div> 

#container { 
    position:relative; 
} 

#img2 { 
    position: absolute; 
    left: 50px; 
    top: 50px; 
}

はまた、あなたが<img>タグやbackground-imagesを使用するかどうかをセマンティックのvalueOf上の画像を依存、すなわち、彼らは、ページのプレゼンテーションやactualy満足していますか？

出典

2009-07-02 15:09:03 roryf

私はすべての答えが好きです...しかし、私はそれが私が欲しかった正確なCSSを持っているので、これを受け入れました:)。皆さんに感謝します！！！！！！！！！！！！！！！！！ –

ありがとう、素敵な答え – kobe

画像に「alt」属性がないとHTMLが無効です。 – tomasz86

最も簡単な方法は、彼らが同じサイズの両方していることを確認することです、1は、透明性を持っており、あなたはこのスニペットを使用します。

<img style="background:url(image.jpg)" src="overlay_image.gif" alt="" />

出典

2009-07-02 15:05:49 Colin

これはおそらくもっと速い方法ですが、イメージの1つを絶対的にもう一方のイメージよりも上に置くこともできます。 – Dan

@Dan：背景位置を使用する場合、オーバーレイ画像を表示するには、オーバーレイ画像の周囲に十分な透明なスペースが必要ですが、背景位置を使用する場合はそうです。 – DisgruntledGoat

とCSSでメイン画像の背景画像を設定し

出典

2009-07-02 15:07:07 Weegee

overlay_imageはバックグラウンドルールではなくsrc属性内になければなりません。当然のことながら、背景ルールは背景を決定します... – DisgruntledGoat

ああ、良いキャッチは、私がそれを書いたときに考えていませんでした。編集されました。 – Weegee

しかし、どちらも同じサイズですか？ –

また、次のコードを使用して画像の上にテキストを使用することができます。

<TABLE BORDER="0" cellpadding="0" CELLSPACING="0"> 
    <TR> 
    <TD WIDTH="221" HEIGHT="300" BACKGROUND="samplepic.jpg" VALIGN="bottom"> 
     <FONT SIZE="+1" COLOR="yellow">Sample Text</FONT> 
    </TD 
    </TR> 
</TABLE>

お役に立てば幸いです。

出典

2011-11-17 19:05:19 sara

非常に「古い学校」のコード。これを使用しないでください（HTML電子メールを除く）。 – tomasz86

答えて

関連する問題