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

【问题标题】：How do I show text over image using divs?如何使用 div 在图像上显示文本？
【发布时间】：2015-07-29 07:34:29
【问题描述】：

我的滚动框中的图片很少，我需要一些文字来覆盖该图片。 图片数量可以是动态的，数量不必是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，它可以移动文本并将其放置在相应的图像上。但我无法自己解决。谁能帮帮我？

【问题讨论】：

“我不允许修改 div 样式”是什么意思？
使用 span 上的相对位置和负左值
我正在与一个团队合作，并且对 div 有许多其他依赖项。因此，修改 div 样式会影响网页中的其他内容。我从中取出样本并在这里分享
@FabrizioCalderan 这样做会折叠我的图像：|
你用left代替margin-left了吗？

标签： javascript jquery html css

【解决方案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;
}

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

我做了一个小提琴来展示这个：

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

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

Z-Index 问题：CSS Text over image

鼠标事件：How to display text over image

编辑

以下评论重新。滚动条到这篇文章我更新了我的小提琴并添加了一些应该有帮助的链接

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

【讨论】：

滚动是垂直的:(，我们可以让它水平滚动吗？
在我的小提琴中，还是在您的页面中？你定义了对象的大小，所以检查一下，溢出-x 我认为是规则吗？我添加了一些链接。现在
是的，小提琴的卷轴是垂直的。我们可以让它水平吗？
小提琴已更新，如果您的最终场景非常不同，链接可能仍然有用。
在编辑中添加了详细信息，我在小提琴中留下了一些评论的 css，以防您需要在您的网站中使用它 - 但如果差异太大，这些链接应该会有所帮助。

【解决方案2】：

使用background-image（如果可以的话）：

所以而不是：

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

用途：

<div class="img img_1">My new_1 text</div>

使用 CSS：

.img{
   background-repeat:no-repeat;
   width:400px;
   height:200px;
}

.img.img_1{
   background-image:url(1.jpg);
}

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

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

【讨论】：

这种方法的问题是我必须为多个图像创建多个样式，而没有。图片可以是动态的：|
@Abhishek 我已经更新了我的答案。如果数据是动态的，您可以在style 属性中包含background-image。
另一个问题，图像是垂直滚动的。我需要它们是水平滚动的。能实现吗？
@Abhishek 图片的尺寸是多少？你是什么意思他们是滚动？

【解决方案3】：

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

http://jsfiddle.net/p5Lkgwuy/

【讨论】：

如果我有多个图像，所有图像都将在另一个之下。我需要水平滚动，而不是垂直滚动。编辑的 jsfiddle：jsfiddle.net/p5Lkgwuy/1。你能帮我吗？
放入 div {float:left}
Fiddle 显示正常，但是当我在 sample.html 页面上尝试并在 chrome 中加载时，所有文本都是一个重叠的。见s30.postimg.org/bb2yll5ap/Selection_003.png:|
你忘记了“#inner_container div”位置：相对。

【解决方案4】：

这是一个工作示例，

https://jsfiddle.net/mhdazeem/10zL9fho/

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

CSS

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

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

【讨论】：

【解决方案5】：

请检查代码并告诉我:)

$(document).ready(function() {
  $('#inner_container img').each(function() {
    var imgHeight = $(this).height(),
      imgwidth = $(this).width(),
      imgPositionTop = $(this).offset().top,
      imgPositionLeft = $(this).offset().left;
    $(this).next('span').css({
      'width': imgwidth,
      'height': imgHeight,
      'position': 'absolute',
      'top': imgPositionTop,
      'left': imgPositionLeft
    });
  });
});

#inner_container span {
  background: rgba(0, 0, 0, .8);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div id="hcontainer" style="width: 600px;">
  <div id="inner_container" style="overflow: auto; width: 2500px;">
    <img src="1.jpg" width="400px" height="200px" /><span>My new_1 text</span>
    <img src="2.jpg" width="400px" height="200px" /><span>My new_2 text</span>
    <img src="3.jpg" width="400px" height="200px" /><span>My new_3 text</span>
    <img src="4.jpg" width="400px" height="200px" /><span>My new_4 text</span>
    <img src="5.jpg" width="400px" height="200px" /><span>My new_5 text</span>
    <img src="6.jpg" width="400px" height="200px" /><span>My new_6 text</span>
  </div>
</div>

【讨论】：