如何解决在图像上映射点
我有此gif图像,但我想在该图像的261,274上放置一个点。点是7px x 7px。我怎样才能做到这一点?我已经试过了:<table style=\"background: url(\'mainimage.gif\'); width:513px; height:550px;\">
<tr>
<td style=\"position:relative; top:274px; left:-261px; background: url(\'dot.gif\'); width:7px; height:7px;\"></td>
</tr>
</table>
还有这个:
<div style=\"background: url(\'mainimage.gif\'); width:513px; height:550px;\">
<div style=\"position:relative; top:274px; left:-261px; background: url(\'dot.gif\'); width:7px; height:7px;\"></div>
</div>
但是这些似乎无法正常工作。
我也查看了area元素,但是我真的无法弄清楚如何使用它们。
编辑:Jsfiddle的:
http://jsfiddle.net/3Ahfd/
http://jsfiddle.net/3Ahfd/1/
解决方法
使用相对定位。你去了:
<div style=\"background: url(\'mainimage.gif\'); width:550px; height:513px; position: relative;\">
<img src=\"dot.gif\" style=\"position: relative; top:264px; left:258px; width:7px; height:7px;\">
</div>
小提琴:http://jsfiddle.net/alp82/3Ahfd/6/
, 尝试这个:
<div style=\"background: url(\'mainimage.gif\'); width:513px; height:550px;position:relative;\">
<div style=\"position:absolute; top:271px; left:259px; background: url(\'dot.gif\'); width:7px; height:7px;\"></div>
</div>
注意:相应地调整内部div的顶部和左侧-我从您的坐标中减去了3px以将圆点居中。
, <div style=\"background: url(\'mainimage.gif\'); width:513px; height:550px; position:relative;\">
<div style=\"position:absolute; top:274px; left:261px; background: url(\'dot.gif\'); width:7px; height:7px;\"></div>
</div>
JSFiddle。
, 我建议不要将点作为ѭ5的背景图像,而建议仅将其用作image
标记,并使用边距将其相应地定位。
就像是:
<div style=\"background: url(\'mainimage.gif\'); width:513px; height:550px;\">
<img src=\"dot.gif\" style=\"margin-top:274px; margin-left:-261px;\" />
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。