css精灵作为背景，有限部分？

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

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

谢谢

编辑：是否有一种方法可以在不设置背景元素的宽度和高度的情况下执行此操作？（我不确定我是否可以设置宽度和高度）

编辑2：这就是我需要的：

---

谢谢

如果您不打算设置重复的背景，您可以这样做。否则不行

---

要做到这一点，您需要调整背景偏移量和正在设置背景的实际元素的宽度/高度。

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

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

将元素的背景设置为图像

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

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

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

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

编辑 如果无法控制要放置背景的元素的宽度和高度，但可以添加新的DOM元素，则可以尝试在确实要将图像作为背景的元素内添加一个跨度

它看起来像：

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

编辑2 如果您可以控制新的DOM元素，并且希望在不影响跨度的情况下使精灵成为背景，只需在原始div中添加另一个div即可

最终会看起来像：

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

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

这样，您就可以将sprite大小调整应用于块元素，而不会影响内联内容。如果CSS按子状态（如

#noControl>a

）处理元素，这可能会影响CSS，因为您要在父级和子级之间插入一个div

---

我仍在研究，如果您对DOM完全没有控制权，是否可以这样做。

这是可能的。您需要在48x48 div中显示，然后为div设置

position:absolute

样式，并为其定义

left

和

top

。还为div设置

z-index:0

，使其显示在所有内容下。

这将取决于sprite中它周围有多少空白，它是否适合您需要的位置，而不显示其他图像的部分。。但是，您可以在需要图像的位置放置一个跨距，并将跨距裁剪为48x48，使其仅显示图标本身。这在某种程度上取决于你想用它做什么，以及精灵是如何构建的

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

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

为了澄清这可能被否决的原因（你应该真正解释你的否决票，以便社区能够改进！）：用户询问如何渲染图像，你基本上给出了一个答案，说他应该绝对地在他想要的位置后面放置一个元素。这根本不是问题的核心，因为他的图像中包含其他图标，他需要限制和移动背景图像，而不是元素。@rockerest:用户不是问如何精灵图像，他已经知道了，他想知道如何精灵页面的背景。现在我看看你的答案，我发现建议的方法与我的有点类似。这个部门是这里的背景。（只是为了澄清我自己的答案。不要回答这个。）在我的国家，我有言论自由，所以如果我愿意，我会回答这个问题。如果用户不是在问如何对图像进行精灵化，那么您如何解释这个直接引用他的问题？“有没有办法只显示图像的一部分作为背景？”此外，他发布的原始JSFIDLE没有对图像进行精灵化，如果他知道他需要精灵化（他做到了），并且他知道怎么做，为什么不呢？你的答案是答案的一半。在对我的答案进行任何更新或评论之前，你的答案似乎是完全错误的。我只是解释为什么它可能被否决。@yes123，你能在元素中添加元素吗？你需要一些东西来缩小你的图标，从而创建一个“窗口”，你只能通过它看到你想要的图标。如果您不能控制任何DOM元素，您可能是SOL。我可以向DOM添加元素，这不是问题。但是添加内联块如何将其作为背景放置在id=“noControl”？内的其他元素下？您需要设置z索引以适应新元素。您可以将新跨度的z索引设置为负方向上非常大的值，它应该落后于所有其他元素。这可能需要大量的摆弄。我会用另一个选项更新我的答案，这可能会让事情变得更简单。你的答案是正确的！xDSo，我的新更新的问题是，它可能仍然会对您的CSS产生影响（这就是为什么我假设您不能触摸外部容器）。也有可能它不会影响任何事情，但这是有机会的。如果无法在内容周围添加div，则必须将span或div添加为内容的同级，并根据@Hossein的回答将其放置在内容后面

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

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