演示

Question

我有一张需要在上面添加文本的图像（可访问性原因）。使用引导程序img响应类可响应该图像。即使图像大小发生变化，文本也必须保留在图像的右侧。有没有办法用CSS做到这一点？

这是一个基本示例：

<style>
span#mad {
    position: relative;
    top: 440px;
    left: 440px;
}
</style>
<span id="mad">
    Madagascar
</span>
<div id="map">
    <img src="http://www.freeworldmaps.net/printable/africa/countries.png" 
    class="img-responsive"/>
</div>

https://jsfiddle.net/DTcHh/95125/

马达加斯加的标签应始终保留在岛上。

Answer 1

不清楚您要查找静态文本还是动态文本，但听起来PopperJS正是您要的内容。如果您的img不能填满整个div，而这会造成不必要的差距，请给您的img指定一个ID，以便您可以直接引用它，而不必包装div。

var popper = new Popper(document.getElementById("mad"), document.getElementById("map"), {
    placement: 'bottom'
});

Answer 2

您可以使用孩子-父母关系，其相对位置要相对于父母，并且绝对位置要定位的孩子。

由于<img>不能有孩子。我们可以使用div元素来模仿它，并在其中添加文本和img，这样我们就可以具有子代与父代的关系。

演示

div {
  display: inline-block;
  position: relative;
}

div>span {
  position: absolute;
  top: 0;
  right: 0;
}

<div>
  <img src="https://via.placeholder.com/300x200">
  <span>some text</span>
</div>

相对于图像的特定部分在响应图像上放置文本

2 个答案:

演示