0

我想在同一页面上多次放置相同的图像。我为此图像创建了一个 div，但我不确定每次放置它的最佳方法是什么。我是初学者，我希望这是相对简单的。有没有更好的方法来解决这个问题？我在 html 部分中确实有所有的“箭头”，但它看起来很笨重。谢谢你的帮助！！！顺便说一句，此示例仅显示 1 个实例。

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

5 回答 5

0

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

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

于 2012-12-22T23:10:05.813 回答
0

您可能会想要使用 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;       
}​

演示

于 2012-12-22T23:15:38.200 回答
0

你在那里，但我在这里创建了一个示例，显示了一个工作示例：http: //jsfiddle.net/u8Bww/2/

该.arrow元素应设置为display:block;. 由于我在<div class="arrow">Text</div>HTML 中有文本，因此我使用了多种技术组合将其隐藏在视图中，以便背景图像通过：text-indent: -1000px; color: transparent; font-size: 0px;.

您现在可以在.arrow需要显示图像的任何地方使用该类。

至于定位，我已经包含了一些内联 CSS 的示例来执行此操作，尽管您自己的使用可能会有所不同。

于 2012-12-22T23:25:05.233 回答
0

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

<div class="arrow arrow1">

然后使用以下方法选择它：

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

目标虽然不是必须使用绝对定位，也不必为每个图像做太多“自定义”的东西，但是当有必要时，您可以使用这种方法将样式保留在 html 之外。

于 2012-12-22T23:35:08.480 回答
0

我将您的问题解释为您希望在您的图像上添加一个箭头叠加层，如下所示：

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;
}

演示：

jsFiddle 箭头叠加

于 2012-12-23T03:34:31.090 回答