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坐标，其中48px x 48px的左上角位于精灵图像中。所以也许它实际上是96px 0px或其他什么。

修改

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

看起来像是：

<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 */
}

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

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

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

Answer 2

简单的回答否，但你可以使用html元素。 Html元素的高度和宽度应与图像的背景部分匹配。

Answer 3

如果您不打算设置重复背景，则可以。否则没有。

要执行此操作，您需要使用背景偏移量以及设置背景的实际元素的宽度/高度。

Answer 4

它将取决于精灵中它周围有多少空白，无论它是否适合您需要它而不显示其他图像的部分..但是你可以例如将跨度放在您想要图像的范围内，并将跨度裁剪为48x48，以便它只显示图标本身。它取决于你想要使用它以及如何构建精灵

Answer 5

最好使用:: before或:: after，这样您就可以轻松定义图像大小而不会出现溢出问题！

Answer 6

这是可能的。您需要在48x48 div中显示该值，然后为div设置position: absolute样式，并为其定义left和top。同时为div设置z-index: 0，使其显示在所有内容中。

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

6 个答案:

修改

编辑2