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 style / css属性。因此，使用div风格的绝对和相对解决方案是行不通的！我可以和img＆amp; span标签和css属性。

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

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

Answer 2

以下是一个很好的例子：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/

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

Answer 4

这是一个有效的例子，

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

dd

CSS

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

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

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

5 个答案: