同一图像的多个实例＆amp;定位

Question

我想在同一页面上多次放置相同的图像。我为这个图像创建了一个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>

Answer 1

很难确切地知道你要做什么，但我想你想在每个[div div]的实例上放一个箭头。您是否考虑过将此箭头设置为要应用此箭头的div类的background-url？如果它是其他的，那么如何在页面上设置背景并使其仅在y方向上重复。这将每隔x个像素重复一次箭头，其中x是图像的高度。

请参阅此参考：http://www.techforluddites.com/2010/02/thesis-replacing-list-bullets-with-images-using-css.html

Answer 2

您可能希望使用CSS属性background-image（和简写background）而不是嵌入图像的div。

这是一个简单的例子：

<强> HTML

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

的 CSS

li {
    height: 50px;
    padding-left: 60px;
    margin: 10px;
    background: url(http://placehold.it/50x50) no-repeat;       
}​

Demo

Answer 3

你在那里，但我在这里创建了一个示例，展示了一个有效的例子：http://jsfiddle.net/u8Bww/2/

.arrow元素应设置为display:block;。由于我在<div class="arrow">Text</div> HTML中有文字，因此我使用了多种技术将其隐藏起来，因此背景图片显示为：text-indent: -1000px; color: transparent; font-size: 0px;。

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

至于定位，我已经包含了一些内联CSS的例子，尽管你自己的用途可能会有所不同。

Answer 4

如果您只是谈论如何“标记”更好一点，您可以为每个图像（或围绕它们的div）添加自定义类，然后在外部样式表中添加css。类似的东西：

<div class="arrow arrow1">

然后使用：

选择它

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

目标虽然不是必须使用绝对定位并且必须为每个图像做太多“自定义”的东西，但是在必要时你可以使用这种方法来保持样式不受html的影响。

Answer 5

我将您的问题解释为您希望在图片上设置箭头叠加，如下所示：

<强> HTML：

<div id="thumbnail1" class="clickDiv">Thumbnail 1
    <div class="arrowOverlay" ></div>
    <img src="http://lorempixel.com/200/200/sports/1" class="thumb" />
</div>

<强> CSS：

.clickDiv {
  position: relative;
  margin: 30px;
    /* The size of the DIV will be the thumnail image size plus borders on EACH side. */
  width: 204px;
  height: 204px;
  float: left;
}

.arrowOverlay {
  position:absolute;
  background:url("http://www.gravatar.com/avatar/106d65dcf622137346a5f164598985fa?s=64&d=identicon&r=PG") no-repeat center center;
  width: 100%;
  height: 100%;
  cursor: hand;
  cursor: pointer;
}

.thumb {
  width:  200px;
  height: 200px;
  /* Reminder: The border attribute as seen provides 2px per EACH side of the DIV. */
  border: 2px solid red;
}

DEMO：

jsFiddle Arrow Overlay