Question

我有这个gif图像，但我想在该图像上的261,274上放置一个点。点是7px乘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>

但那些似乎不能正常运作。

我也查看了区域元素，但我无法弄清楚如何使用它们。

编辑：Jsfiddle的：

http://jsfiddle.net/3Ahfd/
http://jsfiddle.net/3Ahfd/1/

Answer 1

试试这个：

<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以使点居中。

Answer 2

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

Answer 3

使用相对位置。你去了：

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

Answer 4

我建议只使用它作为div标记并使用边距相应地定位，而不是将点设为image的背景图像。

类似的东西：

<div style="background: url('mainimage.gif'); width:513px; height:550px;">
    <img src="dot.gif" style="margin-top:274px; margin-left:-261px;" />
</div>

在图像上映射点

4 个答案: