【发布时间】：2011-06-21 19:35:14
【问题描述】：
我想知道是否可以使用每个图像为 16 x 16 的精灵作为大约 300 像素的输入文本/文本区域的背景。任何人都知道一种方法，或者我应该将它们分成不同的背景。
【问题讨论】：
-
背景是否重复？在什么方向？您可以发布图片/示例吗？
【发布时间】：2011-06-21 19:35:14
【问题描述】：
您的需求可能是Diagonal CSS Sprites 的绝佳候选者。
这个想法是，您可以在可变或更大尺寸的上下文中将精灵用作背景图像，而不必担心精灵中的其他图形会出现。
为什么是对角精灵？
对于在对角线上构建的精灵，您正在显示的组件下方或右侧没有任何组件。这允许使用精灵的元素尽可能宽或尽可能高，而不必担心暴露下一个组件。
当然，这是以更大的 sprite 文件大小为代价的，因为有额外的空白，但是灵活性通常值得在文件大小上进行权衡。
【讨论】：
-
如果您想将图像对齐“但”左上角的任何位置，这会起作用吗？
好吧，您可以将每个精灵在精灵表中相隔 300 像素，因此一次只能在框中看到一个。
设置：
background-repeat: no-repeat;
对于 textbox2 执行：
background-position: -300px 0;
什么的。
【讨论】：
-
这不起作用。如果你最终得到一个足够宽的元素，它最终会显示下一张图片。
您可以尝试这样做：
【讨论】：
-
看起来很多精灵看起来像您在此处插入的精灵，但问题是如何在输入控件中使用它而不显示精灵的其他部分。伪不是输入控件的选项。
-
很容易——假设输入必须有蓝色渐变背景（最底部的那个）。您需要做的是将背景设置为
url(sprite.png) repeat-x 0 -225px（225px 是蓝色渐变开始的高度）。这样你就有可能水平重复渐变，其他元素不会出现。
是的，当然可以在input 上使用精灵，但如果您关心浏览器兼容性，我强烈建议您不要这样做。例如，Internet Explorer 7 中input 元素上的背景图像不会停留在固定位置，因此当您键入时，背景图像会移动。如果您使用的是水平精灵，那可能会特别成问题。我建议将input 放在具有背景的容器元素中。为此，请确保每个图像周围都有额外的空间，以防止浏览器和设备与表单元素间距/高度/边距/填充不一致。一开始使用重置 CSS 样式表会很有帮助。再测试再测试！
【讨论】：