在输入中使用Sprite图片

问题描述

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

解决方法

        您的需求可能是对角CSS Sprite的理想选择。 这个想法是，您可以在可变或更大尺寸的上下文中将精灵用作背景图像，而不必担心精灵中会显示其他图形。 为什么是对角精灵？ 由于将精灵构建在对角线上，因此所显示的组件下方或右侧没有组件。这使得使用Sprite的元素可以达到所需的宽度或高度，而不必担心暴露下一个组件。 自然，由于存在额外的空白，这是以较大的Sprite文件大小为代价的，但是灵活性通常值得在文件大小上进行权衡。     ,        好吧，您可以将每个精灵放置在精灵表中300px，这样一次只能在框中看到一个。 组：

background-repeat: no-repeat;

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

background-position: -300px 0;

或者其他的东西。     ,        您可以尝试通过以下方式进行操作：     ,        是的，肯定可以在

input

上使用sprite，但是如果您关心浏览器的兼容性，强烈建议不要使用它。例如，Internet Explorer 7中“ 2”元素上的背景图像不会停留在固定的位置，因此在您键入内容时，背景图像会移动。如果您使用的是水平精灵，那可能会特别成问题。我建议将ѭ2放入具有背景的容器元素中。为此，请确保每个图像周围都有多余的空间，以防止浏览器和设备与表单元素的间距/高度/边距/内边距不一致。一开始使用重置的CSS样式表将很有帮助。并再次测试！