Css 同一图像的多个实例&；定位

我想在同一页上多次定位同一图像。我为这张图片创建了一个div，但我不确定每次定位它的最佳方式是什么。我是一个初学者，我希望这是一个相对简单的东西。有没有更好的办法？我确实有html部分中的所有“箭头”，但它看起来相当笨重。谢谢你的帮助！！！顺便说一下，这个例子只显示了一个实例

div.arrow  
{
width:17px; 
height:16px;
background-image: url("images/resumearrow");
}

<div class="arrow">
<img style= "position:absolute; top:13px; left:-19px; width:17px; height:16px;"></div>

div.arrow
{
宽度：17px；
高度：16px；
背景图片：url（“图片/简历箭头”）；
}

很难确切了解您想要做什么，但我认为您希望在[something div]的每个实例上都放一个箭头。您是否考虑过为要应用此箭头的div类设置背景url？如果是其他内容，在页面上设置背景并使其仅在y方向上重复，如何。这将每x像素重复一次箭头，其中x是图像的高度

---

请参见此参考：

您可能希望使用CSS属性

背景图像（以及缩写
背景图像）
，而不是嵌入图像的div

下面是一个简单的例子：

HTML

<ul>
    <li>Apples</li>
    <li>Oranges</li>
    <li>Bananas</li>
</ul>

您已经做到了一半，但我在这里创建了一个示例，展示了一个工作示例：

.arrow
元素应设置为
display:block。因为我在
text
HTML中有文本，所以我使用了多种技术将其隐藏起来，以便背景图像通过以下方式显示：
文本缩进：-1000px；颜色：透明；字体大小：0px

现在，您可以在需要显示图像的任何位置使用
.arrow
类

至于定位，我已经提供了一些内联CSS的示例来实现这一点，尽管您自己的使用可能会有所不同。
如果您只是在讨论如何更好地“标记”，您可以只向每个图像（或其周围的div）添加自定义类，然后在外部样式表中添加CSS。比如：

<div class="arrow arrow1">

我们的目标是不必使用绝对定位，也不必为每个图像做太多的“自定义”工作，但在必要时，您可以使用此方法将样式保留在html之外。
我将您的问题解释为您希望在图像上有一个箭头覆盖，如下所示：


HTML:

缩略图1

CSS:

。单击div{
位置：相对位置；
利润率：30像素；
/*DIV的大小将是thumnail图像大小加上每侧的边框*/
宽度：204px；
高度：204px；
浮动：左；
}
.箭头覆盖{
位置：绝对位置；
背景：url（“http://www.gravatar.com/avatar/106d65dcf622137346a5f164598985fa?s=64&d=identicon&r=PG）无重复中心；
宽度：100%；
身高：100%；
光标：手；
光标：指针；
}
.拇指{
宽度：200px；
高度：200px；
/*提醒：如图所示，border属性为DIV的每侧提供2px*/
边框：2倍纯红；
}

演示：

我明白你重复箭头的意思，但段落高度不同。我最终选择了无序列表选项。非常感谢你的帮助！正如你所知，你不必把段落列成一个列表。您可以将背景url应用于任何对象。它不限于li tag。只需记住给它填充，否则段落将位于背景之上，并将“重复”设置为“不重复”。我最初是“绝对定位”所有内容，只是感觉不对……我知道我可能会全部重做。是的！不过，我很高兴现在做对了！
<div class="arrow arrow1">

.arrow.arrow1 img{
     top:13px; 
     left:-19px; 
     width:17px; 
     height:16px;
}