html – 使用CSS sprites在表单元素上定位背景图像

概述我正在尝试将放大镜作为输入元素的背景.放大镜图标是CSS精灵的一部分,如下所示： 为了定位它,我使用了以下属性： #search-form input[type="text"] { background: url('../images/icons.png') no-repeat left center; background-position: 0px -30px; bor 我正在尝试将放大镜作为输入元素的背景.放大镜图标是CSS精灵的一部分,如下所示：

为了定位它,我使用了以下属性：

#search-form input[type="text"] {    background: url('../images/icons.png') no-repeat left center;    background-position: 0px -30px;    border: 1px solID #a9e2ff;    padding: 3px;    wIDth: 200px;    Font-size: 1em;    padding-left: 20px;}

但背景仍然出现在输入框的顶部,而不是在垂直中间和左侧对齐.我也尝试过：

background：url(‘../ images / icons.png’)no-repeat left mIDdle;

但这也不起作用.

如果它很重要,虽然我猜它没有,这是我的表单标记：

<form action="/search" method="get" ID="search-form">    <input type="text" placeholder="Search..." name="s"></form>

谢谢你的帮助.

解决方法 你宣布背景位置两次.第一个在背景短手属性的末尾,第二个在下一行.解决方案：拆分所有单个后台规则(另外,0 -24px是正确的值)：

#search-form input[type="text"] {    background-image: url('http://i.stack.imgur.com/mfpLm.png');    background-repeat: no-repeat;    background-position: 0 -24px;    border: 1px solID #a9e2ff;    padding: 3px;    wIDth: 200px;    Font-size: 1em;    padding-left: 20px;}

现在你可以面对你的设计的真正问题：如果它们之间没有足够的空间,其他精灵将在输入区域中可见.

总结

以上是内存溢出为你收集整理的html – 使用CSS sprites在表单元素上定位背景图像全部内容，希望文章能够帮你解决html – 使用CSS sprites在表单元素上定位背景图像所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。