Question

你能帮我在html的每张图片上放一个文字“Sign-better.png”。我找到了一些位置相对和绝对here的解决方案，但它对我没有帮助，因为这些图像也使用了这个东西。

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

它的外观如下： picture

link到网站原型

Answer 1

如果您可以发布CSS我可能会更有帮助，但是您可以解决此问题的一种方法是将<img>包装在<div>中，然后将您需要的任何文本放在其中作为兄弟<img>和position:absolute上<img> <p>的{{1}}。然后它们将相互重叠但被约束到包含<div>，您将使用当前用于定位<img>的任何CSS来定位。您可以使用z-index对标记或文本是否位于顶部进行排序（但在此处的代码中，文本默认位于顶部）。

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

无法在html中的图像上放置文本

1 个答案: