Html 使用带有输入的Sprite图像

我想知道是否有可能使用一个sprite，其中每个图像是16 x 16作为输入文本/文本区域的背景，该区域大约为300px。任何人都知道一种方法，或者我应该把它们切成不同的背景。

好吧，你可以把每个雪碧300px分开放在雪碧表中，这样一次只能在盒子里看到一个

设置：

对于textbox2，请执行以下操作：

background-position: -300px 0;

---

或者别的什么。

你可以这样做：

---

您的需求可能是您的最佳选择

其思想是，您可以将精灵用作可变或更大大小上下文中的背景图像，而无需担心精灵中出现其他图形

为什么是对角精灵？

当精灵构建在对角线上时，在显示的组件的下方或右侧没有组件。这允许使用精灵的元素具有所需的宽度或高度，而无需担心暴露下一个组件

---

当然，由于额外的空白，这是以更大的sprite文件大小为代价的，但是这种灵活性通常值得在文件大小上进行权衡。

是的，在

输入上使用sprite当然是可能的，但是如果您关心浏览器兼容性，我强烈建议您不要使用sprite。例如，Internet Explorer 7中
input
元素上的背景图像不会停留在固定位置，因此键入时，背景图像将移动。如果您使用的是水平精灵，这可能会特别有问题。我建议将
输入
放在有背景的容器元素中。为此，请确保每个图像周围都有额外的空间，以防止浏览器和设备与表单元素间距/高度/边距/填充不一致。一开始使用重置CSS样式表会很有帮助。一次又一次的测试
 背景在重复吗？朝哪个方向？你能发布一个图像/示例吗？如果你想在左上角以外的任何位置对齐图像，这会起作用吗？看起来许多精灵看起来像你在这里插入的精灵，但问题是如何在输入控件中使用它，而不显示精灵的其他部分。Pseudo不是输入控件的一个选项。非常简单-假设输入必须有蓝色渐变背景（最底部的背景）。您需要做的是将background设置为
url（sprite.png）repeat-x0-225px
（225px是蓝色渐变开始的高度）。这样你就有可能在水平方向上重复梯度，而其他元素就不会出现。这是行不通的。如果你最终得到一个足够宽的元素，它将最终向你显示下一幅图像。
background-position: -300px 0;