javascript - 如何使用 div 在图像上显示文本？

Question

我在滚动框中只有几张图片，我需要一些文字覆盖该图片。 图像数量可以是动态的，数量不必是 6，并且它们必须水平滚动而不是垂直滚动。以下是我的代码，

<style type="text/css">
.imgtext {
margin-left: -300px;
}
</style>
<div id="hcontainer" style="width: 600px;">
    <div id="inner_container" style="overflow: auto; width: 2500px;">
        <img src="1.jpg" width="400px" height="200px" /><span class="imgtext">My new_1 text</span>
        <img src="2.jpg" width="400px" height="200px" /><span class="imgtext">My new_2 text</span>
        <img src="3.jpg" width="400px" height="200px" /><span class="imgtext"> My new_3 text</span>
        <img src="4.jpg" width="400px" height="200px" /><span class="imgtext"> My new_4 text</span>
        <img src="5.jpg" width="400px" height="200px" /><span class="imgtext">My new_5 text</span>
        <img src="6.jpg" width="400px" height="200px" /><span class="imgtext">My new_6 text</span>
    </div>
</div>

如您所见，文字覆盖了图像，但图像因此而塌陷，这看起来不太好。我研究了相对父定位和绝对子定位的解决方案，但我不允许修改 div 样式/css 属性。因此，在 div 样式中使用绝对和相对解决方案是行不通的!我可以使用 img 和 span 标签以及 css 属性。

我可以使用 jquery/javascript，它可以移动文本并将其放置在相应的图像上。但我无法自己解决。谁能帮我解决这个问题？

Answer 1

下面有一个很好的例子:https://css-tricks.com/text-blocks-over-image/

html

<div class="image-wrap">

      <img src="images/3754004820_91a5c238a0.jpg" alt="" />

      <span>A Movie in the Park:<br />Kung Fu Panda</span>

</div>

CSS

.image-wrap { 
   position: relative; 
   width: 100%; /* for IE 6 */
}

.image-wrap > span { 
   position: absolute; 
   top: 175px; 
   left: 0; 
   width: 100%; 
   display:block;
}

确保图像样式不冲突，然后应用绝对位置并将文本范围偏移到您想要的任何位置(根据需要更改顶部和左侧)

我做了一个 fiddle 来展示这个:

jsfiddle:https://jsfiddle.net/dabros/me0j4opp/

另外，这些帖子回答了类似的问题:

Z-Index 问题:CSS Text over image

鼠标事件:How to display text over image

编辑

以下评论回复。这篇文章的滚动条我更新了我的 fiddle 并添加了一些应该有帮助的链接

这是更改后的 CSS:

.image-wrap { 
   position: relative; 
   width: 400px;
    display:inline-block;
}

.image-wrap > span { 
   position: absolute; 
   top: 175px; 
   left: 10px; 
   width: 100%; 
   display:block;
    z-index:99;
}

至于链接，标题解释得很好

Hiding the scrollbar on an HTML page

Hide scroll bar, but still being able to scroll

https://css-tricks.com/forums/topic/hide-vertical-scrollbar-but-still-scrollable/