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

我在一个滚动框内有一些图像，我需要一些文本来覆盖该图像图像的数量可以是动态的，图像的数量不需要是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>

.imgtext{
左边距：-300px；
}
我的新课文
我的新课文
我的新课文
我的新课文
我的新课文
我的新课文

正如您所看到的，文本覆盖在图像上，但是图像因此而塌陷，这看起来不太好。我已经研究了相对父定位和绝对子定位的解决方案，但我不允许修改div样式/css属性。所以，在div样式中使用绝对和相对解决方案是行不通的！我可以随意使用

img

&

span

标签和css属性

---

我同意使用jquery/javascript，它可以移动文本并将其放置在相应的图像上。但我自己解决不了。有人能帮我吗？

使用

背景图像（如果可以的话）：

因此，不是：

<img src="1.jpg" width="400px" height="200px" /><span>My new_1 text</span>


如果您有图像路径的动态数据，则可以将其包含在
style
属性中：

<div class="img" style="background-image:url(1.jpg)">My new_1 text</div>

My new_1文本
以下是一个很好的例子：

html

<div class="image-wrap">

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

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

</div>

确保图像样式不冲突，然后应用绝对位置并将文本范围偏移到所需位置（根据需要更改顶部和左侧）



我做了一把小提琴，上面写着：

jsfiddle：



此外，这些帖子回答了类似的问题：

Z指数问题：

鼠标事件：



编辑

以下是对我的评论。在这篇文章的滚动条上，我更新了我的小提琴，并添加了一些链接，这些链接应该会有所帮助

这是更改后的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;
}

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




我的新课文
跨度{
位置：绝对位置；
左：0px；
}
div{
位置：相对位置；
}

下面是一个工作示例


请检查代码并让我知道：）


$（文档）.ready（函数（）{
$（'#内部容器img'）。每个（函数（）{
var imgHeight=$（this）.height（），
imgwidth=$（this）.width（），
imgPositionTop=$（this）.offset（）.top，
imgPositionLeft=$（this）.offset（）.left；
$（this.next（'span'）.css({
“宽度”：imgwidth，
“高度”：imgHeight，
'位置'：'绝对'，
“顶部”：imgPositionTop，
“左”：imgPositionLeft
});
});
});
#内部容器跨度{
背景：rgba（0,0,0,8）；
}

我的新课文
我的新课文
我的新课文
我的新课文
我的新课文
我的新课文
你说“我不允许修改div样式”是什么意思？使用span上的相对位置和一个负的左值我正在与一个团队合作，并且div上还有许多其他依赖项。因此，修改div样式会影响网页中的其他内容。我从中取出样本并分享here@FabrizioCalderan这样做会折叠我的图像：|你是否使用了左侧而不是左侧空白？这种方法的问题是，我必须为多个图像创建多种样式，并且图像的数量可以是动态的：|@Abhishek我已经更新了我的答案。如果数据是动态的，则可以在
样式
属性中包含
背景图像
。另一个问题是，图像是垂直滚动的。我需要他们是水平滚动。这能实现吗？@Abhishek形象的维度是什么？你说它们是滚动的是什么意思？如果我有多个图像，所有的图像都是一个接一个的。我需要水平滚动，而不是垂直滚动。编辑的JSFIDLE:。你能帮我一下吗？放入div{float:left}FIDLE显示很好，但当我在sample.html页面上尝试并加载到chrome时，所有文本都是一个一个的。请参阅：|然后您忘记了“#内部容器div”位置：relative。滚动条是垂直的：（，我们可以让它水平滚动吗？在我的小提琴中，还是在你的页面中？你定义了对象的大小，所以检查一下，溢出-x我认为是规则？我添加了一些链接。现在是的，在小提琴中，滚动是垂直的。我们可以使它水平吗？小提琴更新，如果你的最终场景非常不同，链接可能仍然有用。在编辑中添加了详细信息，我在fiddle中留下了一些有评论的css，以防你需要在你的网站上使用它——但是如果这些链接太不同，应该会有所帮助。
<div class="image-wrap">

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

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

</div>

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

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

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

<div id="hcontainer" style="width: 600px;">
    <div id="inner_container" style="overflow: auto; width: 2500px;">
        <div><img src="http://www.abload.de/img/die_farbe_rot9ebr.jpg" width="400px" height="200px" /><span>My new_1 text</span><div>

    </div>
</div>

span{
    position:absolute;
    left:0px;
}
div{
    position:relative;
}

<div id="hcontainer" style="width: 600px;">
<div id="inner_container" style="overflow: auto; width: 2500px;">
    <div class="image">
        <img src="1.jpg" width="400px" height="200px" /><span>My new_1 text</span>

    </div>
    <div class="image">
        <img src="2.jpg" width="400px" height="200px" /><span>My new_2 text</span>

    </div>
    <div class="image">
        <img src="3.jpg" width="400px" height="200px" /><span>My new_3 text</span>

    </div>
    <div class="image">
        <img src="4.jpg" width="400px" height="200px" /><span>My new_4 text</span>

    </div>
    <div class="image">
        <img src="5.jpg" width="400px" height="200px" /><span>My new_5 text</span>

    </div>
    <div class="image">
        <img src="6.jpg" width="400px" height="200px" /><span>My new_6 text</span>

    </div>
</div>

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

    .image span {
    position: absolute;
    top: 100px;
    left: 0;
    width: 100%;
}