在输入中使用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样式表将很有帮助。并再次测试!     

要回复问题请先登录注册