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

您能否帮助我在HTML中的每个图片“Sign-better.png”上放置文字。我发现一些解决方案的位置相对和绝对here，但它不帮助我，因为这些图像也使用这个东西。无法在html中的图像上放置文字

<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到现场原型

来源

2017-02-26 Андрей Румянцев

如果你可以张贴CSS我可以提供更多的帮助，但有办法可以解决这是将<img>包装在一个<div>中，然后将您需要的任何文本作为<img>的兄弟与position:absolute<img>和<p>。然后他们将相互重叠，但被限制为包含<div>，您将使用您当前使用的任何CSS定位<img>。您可以使用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>

来源

2017-02-26 07:18:39

那么，究竟应该在登录容器类写？我可以给站点原型[链接]（https://akrum.github.io/akrum/）。在那里，整个CSS可以被看作是 –

'sign-container'类将拥有位置属性（为了清晰起见，我把它放在元素样式中，但它应该放在CSS中）以及所有'我的符号'类。所以'sign-container'会处理整个事物的大小和位置（符号和文本）。然后，确保'my-sign'的宽度设置为100％，并将其自身限制为容器的大小。 –

提前谢谢！您的解决方案已解决问题 –

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

回答

相关问题