css Sprite 作为背景，有限的部分？

Question

我需要放置一个 48x48 的图标作为背景。我的图像 Sprite 中有这个图标，当然还有许多其他图像。

有没有办法只显示图像的一部分作为背景？

谢谢

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

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

谢谢

Answer 1

设置元素的宽高为48px。

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

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

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

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

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

background-position 中的两个数字是 X 和 Y 坐标(分别)，其中 48px x 48px 的左上角在 Sprite 图像中。所以也许它实际上是 96px 0px 或其他东西。

编辑

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

它看起来像:

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

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

#justCreated{
    display: inline-block;
}

编辑2

如果您可以控制新的 DOM 元素，并且想让您的 sprite 成为背景而不弄乱 span，只需在您的原始 div 中添加另一个 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 */
}

这都是理论上的，但应该可行。

这样，您就可以将 sprite 大小应用于 block 元素，而不会弄乱内联内容。如果它按子状态(如 #noControl > a)处理元素，这可能会影响 CSS，因为您要在父项和子项之间插入一个 div。

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