Bilder überlagern

[sappy]

Hallo,

ich möchte realisiert bekommen, dass ich in meiner html Seite ein Bild einbinde, und über dieses bild möchte ich jeweils ein anderes legen.
Dieses enthält nur ein paar Striche. Diese sollen dem anderen Bild jeweils überlagert werden. Aber nur diese Striche dürfen das Bild überdecken.

Also das wäre mein Untergrund:


Das sollte oben drauf:



Als Ergebniss sollte dann in etwa sowas bei rauskommen:



Ich hab es so vesucht mit dem z-Index:

<div style="position: absolute; top: 450px; left: 210px; z-index: 1;">
<img src="img/img1.gif">
</div>

<div style="position: absolute; top: 490px; left: 250px; z-index: 2;">
<img src="img/img2.gif">
</div>

Aber dann sieht man den Untergrund nicht mehr.

Folgends funktionierte leider auch nicht:

<img class="bgPic" src="img/img1.gif" width="100%" height="100%" alt="" border="0" />
<div class="foreGround">
 <img class="FLeft" src="img/img2.gif" alt="" border="0" />
</div>

Oder muss mein Bild ein spezielles Format haben (*.png?)

Grüße

 

[Tar]

Hallo,

dein zweites Bild (was darüber liegt) muss an den Stellen, an denen nichts sein soll, transparent sein. Der weiße Hintergrund (deines 2. Testbildes) überdeckt das erste Bild komplett. Ändere das weiß zu transparent und es sollte so gehen (wobei man sich darüber streiten kann ob absolute Positionierung dafür am besten geeignet ist).

 

[sappy]

Vielen Dank für die schnelle Antwort. Fuktioniert so.

Grüße