css - 同一图像和定位的多个实例

Question

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

Answer 1

您可能想要使用 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