Html Bild über Bild

Question

Kann mir jemand sagen, wie kann ich ein Bild über ein anderes Bild ohne Z-index oder Z-order hinzufügen?

Answer 1

Schwierig zu beantworten, ohne genau zu wissen, was Sie erreichen möchten, z-Index ist wahrscheinlich nicht das, was Sie tatsächlich brauchen. Zum Beispiel würde die folgende Arbeiten:

<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; 
} 

auch, ob Sie <img> Tags verwenden oder background-images hängt von der semantischen valueOf die Bilder, das heißt sie sind Präsentations- oder actualy Inhalt der Seite?

Answer 2

Stellen Sie das Hintergrundbild des Hauptbild in CSS mit der background-image Eigenschaft

Answer 3

Der einfachste Weg, um sicher zu machen, ist sie sind beide gleich groß, hat eine Transparenz, und verwenden Sie diesen Schnipsel:

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

Answer 4

Sie können auch Text über das Bild verwenden, indem Sie den folgenden Code verwenden:

<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> 

Hoffnung, das hilft.