将div图像相对于图像大小放置

Question

我有以下spritesheet

我已经想通了，如何从中选择特定的元素

<div class="rune" 
  style="position:relative;
         height:48px;
         width:48px;
         background: url({% static "rune_sprite.png" %}) -384px -192px">
</div>

但是现在我想将这个精灵插入到另一个图像中，相对于另一个图像的高度和宽度，例如该图像

<img src="{% static "rune_page.jpg" %}"/>

您对如何做到这一点有什么建议吗？

编辑：我希望它看起来像这样：

Answer 1

您可以使用position:relative.

创建父级

符文将有position:absolute.

每个符文都有自己的left和top值。

每个符文类（rune-1，rune-2，rune-3等）都有自己的background-position。

.wrapper {
    position: relative;
}
[class^="rune-"] {
    position:relative;
    height:48px;
    width:48px;
    background-image: url(http://i.stack.imgur.com/WTCrY.png);
    position: absolute;
    top: 0;
    left: 0;
}
.rune-1 {
    background-position: -384px -192px;
}
.rune-2 {
    background-position: -719px -193px;
}

<div class="wrapper">
    <img src="http://i.stack.imgur.com/MVVYd.jpg" />
    <div class="rune-1" style="left: 36px;top: 268px;"></div>
    <div class="rune-2" style="left: 39px;top: 186px;"></div>
</div>

JSFiddle

Answer 2

好的，对于你的大图，你想制作一个div并给它一个背景图像设置高度和宽度，然后给它position:relative;

这将是你的符文图形进入的主要包装。

现在给你的废墟position:absolute;并使用轴设置你希望他们坐在哪里的父母：

top:10px;
right:10px;
bottom:10px;
left:10px;

这里发生的是相对论。我不会详细介绍相对论是如何工作的，但基本上你的废墟绝对与其父级相对。