Kann keinen Text über die Bilder in HTML platzieren

Question

Können Sie mir helfen, einen Text über jedes Bild "Sign-better.png" in HTML zu platzieren. Ich habe einige Lösungen mit relativen und absoluten Positionen gefunden here, aber es hilft mir nicht, weil diese Bilder dieses Ding auch verwenden.

<div style="position: relative"> 
<img src="rope2.png" class="ropeImageClass" style="z-index: 0;overflow: hidden"> 
<div style="position: absolute;top: 45%"> 
    <img src="Sign-better.png" class="my-signs" style="z-index: 1;overflow: hidden;"> 
    <img src="Sign-better.png" class="my-signs" style="z-index: 1;overflow: hidden;"> 
    <img src="Sign-better.png" class="my-signs" style="z-index: 1;overflow: hidden;"> 
</div> 

Dies ist, wie es aussieht: picture

link zum Prototyp-Website

Answer 1

Wenn Sie können die CSS poste ich hilfreicher sein kann, aber ein Weg, können Sie lösen Dies ist, um die <img> in eine <div> zu wickeln und dann setzen Sie, was Sie benötigen Text in das als Geschwister der mit position:absolute auf beiden die <img> und <p>. Dann werden sie einander überlappen, sind aber auf den enthaltenden <div> beschränkt, den Sie mit dem aktuellen CSS positionieren würden, um die <img> s zu positionieren. Sie können z-index verwenden, um zu sortieren, ob das Zeichen oder der Text oben ist (aber in dem Code, den ich hier habe, wäre der Text standardmäßig oben).

SO ...

<div style="position: relative"> 
<img src="rope2.png" class="ropeImageClass" style="z-index: 0;overflow: hidden"> 
<div style="position: absolute;top: 45%"> 
    <div style="position:relative" class="sign-container"> 
     <img src="Sign-better.png" class="my-signs" style="z-index: 1;overflow: hidden;"> 
     <p class="sign-text" style="position:absolute;">This is the text for the sign</p> 
    </div> 
    <div style="position:relative" class="sign-container"> 
     <img src="Sign-better.png" class="my-signs" style="z-index: 1;overflow: hidden;"> 
     <p class="sign-text" style="position:absolute;">This is the text for the sign</p> 
    </div> 
    <div style="position:relative" class="sign-container"> 
     <img src="Sign-better.png" class="my-signs" style="z-index: 1;overflow: hidden;"> 
     <p class="sign-text" style="position:absolute;">This is the text for the sign</p> 
    </div> 
</div>