如何使用div显示图像上的文本?

时间:2015-07-29 07:34:29

标签: javascript jquery html css

我在滚动框内有一些图像,我需要一些文字覆盖该图像。 图片数量可以是动态的,它不需要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 style / css属性。因此,使用div风格的绝对和相对解决方案是行不通的!我可以和img&amp; span标签和css属性。

我可以使用jquery / javascript来移动文本并将其放在相应的图像上。但是我自己无法解决这个问题。任何人都可以帮我吗?

5 个答案:

答案 0 :(得分:1)

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

答案 1 :(得分: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/

答案 2 :(得分:0)

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

答案 3 :(得分:0)

这是一个有效的例子,

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

dd

CSS

dd if=/dev/sda of=/dev/null

答案 4 :(得分:0)

请检查代码并告诉我们:)

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