精灵雪碧作为背景,有限的部分？

Question

我需要放置一个48x48的图标作为背景.我的图像精灵中有这个图标,当然还有很多其他图像.

有没有办法只显示图像的背景？

谢谢

编辑:有没有办法在不设置背景元素的宽度高度的情况下做到这一点？(我不确定我是否可以设置宽度 - 高度)

Edit2:这就是我需要的:http://jsfiddle.net/pdxnj/

谢谢

Answer 1

将元素的宽度和高度设置为 48px。

.element{
    width: 48px;
    height: 48px;
}

将元素的背景设置为您的图像

.element{
    background-image: url('image.png');
}

移动背景，使图标的左上角位于正确的位置。

.element{
    background-position: 20px 94px;
}

背景位置中的两个数字分别是 X 和 Y 坐标，其中 48 像素 x 48 像素的左上角位于精灵图像中。所以也许它实际上是96px 0px或者什么。

编辑

如果您无法控制要放入背景的元素的宽度和高度，但可以添加新的 DOM 元素，则可以尝试在真正想要将图像作为背景的元素内添加一个跨度。

它看起来像：

<div id="noControl">
    <span id="justCreated">
    </span>
</div>

CSS 看起来与上面完全相同，只是您需要将内联跨度视为块元素：

#justCreated{
    display: inline-block;
}

编辑2

如果您可以控制新的 DOM 元素，并且想让您的精灵成为背景而不弄乱跨度，只需在原始元素中添加另一个 div 即可。

最终会看起来像：

<div id="noControl">
    <div id="justCreated">
        ALL of the content that used to be inside #noControl
    </div>
</div>

它的 CSS 是

#justCreated{
    width: 48px;
    height: 48px;
    background-image: url('image.png');
    background-position: 96px 0px;

    z-index: -200;
    /* z-index of all the contents needs to be not set, or set to larger than -200 */
}

这都是理论上的，但它应该有效。

这样，您可以将精灵大小调整应用于块元素，而不会弄乱内联内容。如果 CSS 按子状态（如#noControl > a）来寻址元素，这可能会影响 CSS，因为您在父级和子级之间插入了一个 div。

我仍在研究如果你根本无法控制 DOM，是否可以做到这一点。