将文本定位在 img-s 的确切位置并将它们保留在那里答案

【问题标题】：Position text on an img-s exact spots and keep them there将文本定位在 img-s 的确切位置并将它们保留在那里
【发布时间】：2014-12-09 21:34:03
【问题描述】：

我在定位网站时遇到了麻烦。我有一个背景图像，根据它我想要一些文本应该保持在这个 img 的确切位置。因此，如果图像因分辨率不同而移动，则文本应与 img 一起移动（这些将是菜单项，这就是我需要它们的原因，它们应该出现在章鱼的触手上）。

另外，如果 img 和文本的位置在 css 中是固定的，那么在较小的分辨率上，只有一小部分 img 会出现。出现了卷轴，但如果我使用它们，无论如何只能看到 img 的这些部分。

请帮忙！ :(

我会接受任何类型的解决方案，即使是 jquery 或 javascript，无论我必须如何解决。

谢谢！

编辑：我稍微改变了网站：现在我有一个背景 img，在它上面还有一个 div（这是基础）。里面是另一个章鱼的图像。我有菜单（div 中的文本）应该始终留在触手上。所以我需要章鱼和菜单一起移动并且总是被看到（在任何分辨率下它的全部）。章鱼现在可以在这个宽度/高度：100% settig 的情况下一直完整地看到。我还需要将其居中，但无论如何我尝试它都不起作用，但这是较小的问题。最大的仍然是应该随图片移动的菜单（停留在触手上的图片上）。

【问题讨论】：

您是否创建了一个 jsFiddle 来展示您面临的问题？

标签： javascript jquery css image positioning

【解决方案1】：

你可以用来移除滚动

overflow:hidden;

【讨论】：

这不是我想要的，因为在小分辨率下，只有一部分图像会出现，但我需要它（整张图片）始终可见。
我稍微改变了网站：现在我有一个背景img，在它上面还有一个div（这是基础）。里面是另一个章鱼的图像。我有菜单（div 中的文本）应该始终留在触手上。所以我需要章鱼和菜单一起移动并且总是被看到（在任何分辨率下它的全部）。章鱼现在可以在这个宽度/高度：100% settig 的情况下一直完整地看到。我还需要将其居中，但无论如何我尝试它都不起作用，但这是较小的问题。最大的仍然是应该随着图片移动的菜单（停留在触手上的图片上）。
你能给我看任何解释图片以了解你需要什么吗？或者在这里添加你的代码，
drive.google.com/file/d/0B-RSRXUoSOjEZi1nVk1Pc1V1NEk/…我只能这样说明。我的代码一团糟，无法正常工作，所以没用：/

【解决方案2】：

希望对您有所帮助...Jsfiddle

.atag1{
   position:absolute; 
    top:5%;
    left:2%;
}
.atag2{
   position:absolute; 
    top:18%;
    left:5%;
}
.atag3{
   position:absolute; 
    top:30%;
    left:18%;
     color:blue;
}
.atag4{
   position:absolute; 
    top:50%;
    left:60%;
     color:blue;
}



<div id="container" style="background:red;width:500px;height:500px;opacity:1" ui-widget-content> 

  <div style="background:black;width:300px;height:300px;opacity:1" id="wrapper">
      <img id="img" style="width:100%;height:100%" src="http://cdn7.staztic.com/app/a/2270/2270821/cartoon-and-photoshop-camera-789676-3-s-307x512.jpg">  </img>
       <a class="atag1" >text1</a>
      <a class="atag2" >text2</a>
      <a class="atag3" >text3</a>
      <a class="atag4" >text3</a>

    </div>

    <button  id ="b"  >change image </button>   
</div>


$( document ).ready(function() {
   $("#wrapper").draggable({ containment: "parent" });
    $("#b").click(function(){
    $("#wrapper").show().animate({ "width": (Math.random() * 360) + 0 }, "slow");
     $("#wrapper").show().animate({ "height": (Math.random() * 360) + 0 }, "slow");
    })



});

【讨论】：